CODEWITHSUNDEEP
javascripthtmlcss
L457
L457

Reputation: 1032

html5 video fallback/backup image out of place...?

I wrote up the following html which shows a video background and has 2 fallback images(for mobile and old browsers)

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
    <!--<source src="whatever......">  Disabled for testing  -->
    <img id="browserFallback src="videos/video.gif" title="Your browser does not support the <video> tag">
    </video>
   <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the <video> tag">
</div>

the below javascript displays the second img gif on mobiles instead of the video:

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent) ) {              
    document.getElementById("mobileFallback").style.display = "block";
}

however, because I have 2 img objects at the same time like above, the mobile fallback goes out of alignment and only half of it gets displayed for some reason. It works perfectly fine if i remove the "browserFallback" img.

Any ideas on why this happens?

Upvotes: 0

Views: 645

Answers (1)

MoralCode
MoralCode

Reputation: 2050

Your code has a few simple errors in it which may solve your problem.

Namely:

  • You forgot to close the quotes on the id attribute of the first image tag
  • "Your browser does not support the <video> tag" should be changed to "Your browser does not support the $lt;video&gt; tag". This will render in a browser as the < and > symbols respectively and may be confusing your HTML.

Try changing your code to this:

<div>
   <video id="video_background" preload="auto" autoplay="true" loop="loop" muted="muted" volume="0"> 
       <img id="browserFallback" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
    </video>
    <img id="mobileFallback" style="display:none;" src="videos/video.gif" title="Your browser does not support the $lt;video&gt; tag">
</div>

Upvotes: 1

Related Questions