title: My html background video not playing in safari
body: <p>i created a coming soon webpage using html and bootstrap.I used jquery to show background video and images based on screen size.when screen detected less than 729px ,it appends my background images to a particular div.if more than that pixels it appends a background video.
  Everything works fine in android and other devices except iphone safari.
  safari browser does not load my bg images and bg video.</p>
  
  <pre><code>if(screen.width &gt;= 769){
  
  $('#back').append('&lt;div class="video-bg" style="position:fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;"&gt; &lt;video autoplay muted loop&gt;&lt;source src="video/Final_video.webm" type="video/webm"&gt;&lt;/video&gt;&lt;/div&gt;');
          }
  
  if(screen.width &lt;= 768){
  
  $('#back').append('&lt;div class="bg1" id="backchange" style="position: fixed;top: 0px;left: 0px;right: 0px;bottom: 0px;width: 100%;height: 100%;z-index: -1;overflow: hidden;background-size: cover;background-position: center center;"&gt;');
  
  }
  </code></pre>
  
  <p>here bg1 is a background images loaded from css</p>