title: Adding video background for mobile on wordpress
body: <p>Wonder if you can help. I've been trying to add background mp4 to a WordPress site I am developing for a client. I've explained that its a bad idea due to data usage but he is insistent.</p>
  
  <p>When I added the mp4, I quickly understood that by default this action isn't supported. However, there must be a work around. I have read the posts here and googled extensively. </p>
  
  <p>so far, what I've come up with is using @media to resolve.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>@media screen and (min-width: 600px) {
  .header-video {
      display: block !important;
  }
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>However, this doesn't seem to work either. Other than creating a gif is there any other way?</p>
  
  <p>Additional HTML Code: -- I am interested in the video loop tag with the MP4 in</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="main-content"&gt;
  
  
     
      &lt;article id="post-54" class="post-54 page type-page status-publish hentry"&gt;
  
      
       &lt;div class="entry-content"&gt;
       &lt;div id="et-boc" class="et-boc"&gt;
     
     &lt;div class="et_builder_inner_content et_pb_gutters3"&gt;&lt;div class="et_pb_section et_pb_section_0 header-video et_pb_section_video et_pb_preload et_pb_with_background et_section_regular"&gt;
      
      
      &lt;span class="et_pb_section_video_bg"&gt;
       
     &lt;video loop="loop" autoplay playsinline muted &gt;
      &lt;source type="video/mp4" src="http://fortuna-x.com/wp-content/uploads/2018/07/Deep-Network-Green-Blue.mp4" /&gt;
      
     &lt;/video&gt;
      &lt;/span&gt;
      
       &lt;div class="et_pb_row et_pb_row_0"&gt;
      &lt;div class="et_pb_column et_pb_column_1_3 et_pb_column_0    et_pb_css_mix_blend_mode_passthrough et_pb_column_empty"&gt;
      
      
      
     &lt;/div&gt; &lt;!-- .et_pb_column --&gt;&lt;div class="et_pb_column et_pb_column_2_3 et_pb_column_1    et_pb_css_mix_blend_mode_passthrough et-last-child et_pb_column_empty"&gt;
      
      
      
     &lt;/div&gt; &lt;!-- .et_pb_column --&gt;
      
      
     &lt;/div&gt; &lt;!-- .et_pb_row --&gt;&lt;div class="et_pb_row et_pb_row_1 et_pb_equal_columns et_pb_gutters150"&gt;
      &lt;div class="et_pb_column et_pb_column_1_3 et_pb_column_2    et_pb_css_mix_blend_mode_passthrough"&gt;
      </code></pre>
  </div>
  </div>
  </p>