html5 video fallback/backup image out of place…?

Question

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?

Answer 1

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 > 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>