Image Placeholder Fallback for HTML5 Video

Image placeholder fallback for HTML5 Video

After a lot of searching, I found the solution that worked for me back to IE8. Have not tested in IE7.

How can I display an image if browser does not support HTML5's <video> tag

The above post, shows a method that seems to work for me. Here is the output based on my above code:

<video autoplay>
    <source src="/resources/video/product-hero.mp4.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="/resources/video/product-hero.webmhd.webm" type='video/webm; codecs="vp8, vorbis"' />
    <img src="/images/product/product-parent-hero.jpg" title="Your browser does not support the <video> tag">
</video>

Display fallback image even if the browser supports html5 video

poster may be what you're looking for:

Poster: A URL indicating a poster frame to show until the user plays or seeks. If this attribute isn't specified, nothing is displayed until the first frame is available; then the first frame is displayed as the poster frame. -Via https://developer.mozilla.org/en-US/docs/HTML/Element/video

Example:

<video width="316" height="161" poster="https://i.stack.imgur.com/BfXRi.png" controls>
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4" />
  <source src="https://clips.vorwaerts-gmbh.de/big_buck_bunny.ogv" type="video/ogg" />
  Your browser does not support the video tag.
</video>

Creating a fallback image for HTML5 video in email

Based on the article you took the code from, you’re missing the following part that is supposed to act as a fallback:

<!-- fallback section -->
<div class="video-fallback">
  <p>Fallback Content</p>
  <a href="https://www.emailonacid.com" ><img height="176" 
    src="https://www.emailonacid.com/images/blog_images/Emailology/2013/html5_video/bunny-fallback.jpg" width="320" /></a>
</div>

Fallback image for HTML5 video

To fallback image to html5 in mobile view.

you need to use media queries.

CSS

@media screen and (max-width: 768px){
  video{
    display:none;
  }
    .full-img{
    background: url('https://pbs.twimg.com/profile_images/686049493884665856/BW148X8R_400x400.jpg');
    background-size: cover;
  }

DEMO

html5 video fallback advice (no flash)

Used a media query after about 1100px and replaced it with an image using css background size set to cover!

---

Related Topics