CODEWITHSUNDEEP
htmlcssvimeo-player
lingofant
lingofant

Reputation: 13

Vimeo Video iFrame - On Mobile fill Screen (Hide Sides with Pan over Video)

I developing a website with a video as a hero image which is always fullscreen. Easy thing on desktop. Video is hosted on VIMEO.

But now the hard part.

  1. On mobile the video should take 100vh. The overflown sides should be hidden.
  2. There should be a pan over the video. From left to right.

Clarification For know i could not manage to make the video flow over the sides. Any idea or experiences? I tried various solutions provided online didnt change a lot.

Thanks a log 🙌🏼🫶🏻

Code for Desktop fullsceen:

    .video-responsive-home {
        padding-top: 0;
        height: 0;
        overflow: hidden;
         --videoRatio: calc(16 / 9);
    }

    .video-responsive-item-home {
        position: absolute;
        top: 0;
        left: 0;
        --w: 100vw;
        --h: calc(var(--w) / var(--videoRatio));
        height: var(--h);
        width: var(--w);
    }
<div class="video-responsive-home">
 <iframe class="video-responsive-item-home" 
    src="https://player.vimeo.com/video/707269251?autoplay=1&loop=1&muted=1"    
    frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen>
 </iframe>
</div>

Upvotes: 0

Views: 1055

Answers (1)

TheLearner
TheLearner

Reputation: 5

I just used this additional CSS. Works for me.

@media(max-width:979px){
    iframe {
        height: 450px;
}
}
@media(max-width:700px){
    iframe {
        height: 200px;
        padding: 10px 0 10px 0;
}
}

You can use a class instead of iframe, but for me it worked OK.

Upvotes: 0

Related Questions