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

CSS

Amanda Bater
Amanda Bater
7,686 Points

Autoplaying videos on mobile...

Say I have a video background as part of my site...so it plays in the background automatically. When I view my site on a mobile device obviously the autoplay doesn't work, so I just get the embedded play button instead.

Is there anyway I can swap the video for an image only for mobile devices? Or even a way to get rid of the embedded play button, even if you just see the first frame of the video and nothing else this would be fine.

Really grateful for any tips here, this is something I've been trying to work out for a while!

2 Answers

Cindy Lea
PLUS
Cindy Lea
Courses Plus Student 6,497 Points

Heres a great article on why the autoplay is disabled on many cellular devices:

https://www.aerserv.com/why-does-video-autoplay-on-mobile-devices-not-work/

You may have to test for the device types first then either display video or a picture.

Amanda Bater
Amanda Bater
7,686 Points

Cool, thanks for the info! I understand why now. I know that my video will not autoplay on mobile devices, so I'd like to display a picture instead, just not sure how to do that!