Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Stuart McPherson
Stuart McPherson
15,939 Points
Posted by Stuart McPherson
Stuart McPherson
15,939 Points

Why wont videos display on tablet or mobile?

I have a video on a page, works well on desktop and also on other desktops/laptops if I visit the workspace preview link. But if I visit that link on mobile or tablet. The video doesn't display. I have text overlaying the video working as buttons and they display but there's just a grey background behind those buttons and no video?

index.html 
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Welcome</title>
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link rel="stylesheet" href="css/styles.css">
  <link rel="stylesheet" href="css/responsive.css">
  <script src="http://cufon.shoqolate.com/js/cufon-yui.js" type="text/javascript"></script>
  <script src="/js/myriad-pro.cufonfonts.js" type="text/javascript"></script>
  <script type="text/javascript">
    Cufon.replace('.myriad-pro-regular', { fontFamily: 'Myriad Pro Regular', hover: true }); 
    Cufon.replace('.myriad-pro-semibold', { fontFamily: 'Myriad Pro Semibold', hover: true }); 
    Cufon.replace('.myriad-pro-bold', { fontFamily: 'Myriad Pro Bold', hover: true }); 
  </script>

  </head>
  <body bgcolor="#111">

    <div id="video_box">
      <div id="video_overlays">
        <h1>Welcome</h1>
        <a href="home.html" class="btn btn-sm animated-button video-button" >Find Out More</a>
        <a href="contact.html" class="btn btn-sm animated-button video-button">Contact Us</a>
      </div>
      <div>
        <video id="player" width="100%" height="auto" src="video/welcome-video.mp4" type="video/mp4" autoplay loop>Your browser does not support this streaming content.</video>
      </div>
    </div>

  </body>
  </html>
Kris Byrum
Kris Byrum
32,534 Points
Kris Byrum
Kris Byrum
32,534 Points

This is how I would format your video tag. It might solve the problem.

Also, with older phones some video formats may not be supported, although I believe that .mp4 should be standard now.

<video width="320" height="240" controls>
  <source src="movie.mp4" type="video/mp4">
  <source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>

1 Answer

Stuart McPherson
Stuart McPherson
15,939 Points
Stuart McPherson
Stuart McPherson
15,939 Points

After further research I believe its down to Apple and Android blocking the autoplay feature on videos. This is because videos uses more bandwidth and so the companies want the user to have more control of what they use their data on therefore any media needs the user interaction to start