I’ve used html embed code for a fullwidth video on the hero section on my website homepage. I have made the video not visible on ipad and mobile views and replaced it with an image, but, on the iPad horizontal view the video still appears (and with a “play” button, which does not show on the desktop view). I would like the image to appear on the iPad horizontal view instead of the video. I’ve attached a couple screenshots.
I have added the following code into the custom code section of the home page settings to remove the video from the iPad landscape view:
<style>
/* iPads (landscape) ----------- */ @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) {
.video {display:none;}
}
Problem is, that completely removes the whole hero section in the landscape view (see attached screenshots). The header section (with the image replacing the video) is visible in the portrait view.
are you launching the site in safari on your ipad by opening Safari app and typing in a URL, or did you place a shortcut app-like icon on the iPad springboard and lauch your site from the icon? If you do from the icon, the video bug appears, I noticed that, and I didn’t find a workaround yet. If not, then read 2.
try to add to the element you said not to appear for devices a property display:none too (on top of telling Webflow in the settings tab that it should not appear). If it doesn’t work, try to give it dimensions zero.
Oh I see. The ipad landscape mode defaults to the desktop breakpoint anyway… So you have to take that into account I guess.
What is sure is that the video will never run automatically on ipad or any device. Wether it’s a vimeo, YT or HTML5 video.
What I do for mobiles when I have video backgrounds like this is that I make a lighter animated gif from the video, the first 5 seconds or selected 5 seconds, and I set it as the background image for mobile. In your case, wrapp you video element in a section or a div, and set a background for this new div with your animated gig, as a poster. Also give minimum dimensions to this div so it will show up when the video doesn’t.
So, if I wanted to forgo using an animated gif and just have an image appear in the hero section for both ipad horizontal AND landscape view, is there a way to do that? That would be my preference.
If you want the image that appear on ipad vertical to appear on ipad horizontal, set the image behaing the video as I explained in my post, and give dimensions to the container element.
