Streaming live at 10am (PST)

Replace video w/ image in iPad Landscape


#1

Hello!

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.

Link to my site is: https://preview.webflow.com/preview/atdemo1?preview=0cae047a59cc98239fc74f9199671d07

Maybe I've set up the video wrong?

Help is appreciated! Thanks smile

Hollis

Portrait iPad:

Landscape iPad (hero section dissappears)


#2
  1. 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.

  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.

PS preview link doesn't work for me.


#3

@vincent - I updated her post with the correct read-only link


#4

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.


#5

@vincent Thank you! I will try that - although I'm not sure what a poster is or how to do that.


#6

The poster attribute is a thumbnail or still frame of the video. Here's an article to help you out smile
http://www.w3schools.com/tags/att_video_poster.asp


#7

Thanks guys. We will see how this goes laughing


#8

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.


#9

I meant COVER (:


#10

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.


#11

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.