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
Amanda Bater
7,686 PointsSwapping a video for an image on mobile devices?
I'm building a website that has a video loop playing as the header, and for handheld devices I'd like to swap this video for an image instead.
I know that media handheld is not supported by many mobile devices so I'd rather not use that. Instead I've used some JavaScript to detect mobile devices. I've tested it by asking it to give an alert if the page is viewed on a mobile device, so I know the this part of the script works.
What I'm now trying to do is set it so that only the image shows on mobile devices, but on all other devices the video shows instead. It hasn't worked though, instead both the image AND the video show on all devices, including mobile. Does anyone understand why this is? Will post snapshots of my code.
Or is there a better way all together that I can do this? Have tried to search for answers online but so far nothing that is suitable or has worked!
1 Answer
David Bath
25,940 PointsI think the toggleClass statement is awkward. Why not just show() or hide() each element at that point based on what the any() function returns?
Incidentally, I'm curious about your intentions with this. Is it bandwidth or processor usage that you're concerned about? By the time the page loads both the image and video have been downloaded, so it won't help reduce bandwidth or data usage.