Search code examples
javascriptjquerysafarihtml

My html background video not playing in safari

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.

if(screen.width >= 769){

$('#back').append('<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;"> <video autoplay muted loop><source src="video/Final_video.webm" type="video/webm"></video></div>');
        }

if(screen.width <= 768){

$('#back').append('<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;">');

}

here bg1 is a background images loaded from css

Solution

  • Safari doesn't support video/webm media (looks like IE 11 doesn't either: Can I Use - WebM Video Format).

    If you'd like this to play in Safari, you'll need to include a <source> with a different video file/type (video/mp4 should be fine) in addition to the webm source.

    e.g.

    $('#back').append(`
  <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;">
    <video autoplay muted loop>
      <source src="video/Final_video.webm" type="video/webm">
      <source src="video/Final_video.mp4" type="video/mp4">
    </video>
  </div>
`);