3

I am trying to add a static image as fallback for video background in html 5 but not getting the output can anyone help.

<div class="background-wrap">
     <video id="video-bg-elem" preload="auto" autoplay loop muted>
         <source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
        <img src="/media/staticimage.jpg" title="Your browser does not support the <video> tag">
         
            Video not supported
        </video>
    </div>
Ranbijay
  • 187
  • 2
  • 3
  • 9
  • possible duplicate: http://stackoverflow.com/questions/14616453/image-placeholder-fallback-for-html5-video – Miro Nov 22 '15 at 14:07
  • Dude i had tried with that solution it was not working .Thats why posted here again.And the solution given here by someone worked.You should not have deleted the answer.Anyhow I got the answer .Thanks!! – Ranbijay Nov 22 '15 at 14:14

2 Answers2

0

Check for you image path and replace the <video> tag in the title with &lt; &gt; 

<div class="background-wrap">
    <video id="video-bg-elem" preload="auto" autoplay loop muted>
        <source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
    <img src="/media/staticimage.jpg" 
      title="Your browser does not support the &lt;video&gt; tag">

        Video not supported
    </video>
</div>
ScaisEdge
  • 131,976
  • 10
  • 91
  • 107
0

I suggest that instead of using an image inside the video area, you use a background image.

#video-bg-elem {background-image: url(media/staticimage.jpg);}

<div class="background-wrap">
 <video id="video-bg-elem" preload="auto" autoplay loop muted>
  <source src="media/Digital Marketing Agency in CT - Mediaboom.ogv">
  Video not supported
 </video>
</div>
CDM
  • 141
  • 10