Scroll on iFrame (vimeo)

[Baptiste]

Hello Layteam and Laypeople 👋,

I working on a website where I have to put vimeo iframes using fullscreen slider on some pages (project).

Because it’s an iFrame and fullscreen, I can’t scroll down (it only works on Safari) to other slides and just have the « option » to click on it. That’s pretty annoying because .mp4 video is not an alternative here, those vids are way to big to be host on the server.

I have to use vimeo url’s so I tried something like that with css/js but it doesn’t seams to works, maybe I’m doing something wrong. If anyone have the solution it would be nice 🙏

Best wishes to all and thanks in advance.

HTML
<div class:"vimeoplayer" style="padding:56.25% 0 0 0;position:relative;"><iframe src="...autoplay=1&loop=1&color=ffffff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

CSS
/* Vimeo Player scroll */
.vimeoplayer {
width: 100%;
}
.vimeoplayer iframe{
display: block;
width: 100%;
position: relative;
pointer-events: none;
}
.vimeoplayer iframe.clicked{
pointer-events: auto;
}

JS
<script>
$('.vimeoplayer')
.click(function(){
$(this).find('iframe').addClass('clicked')})
.mouseleave(function(){
$(this).find('iframe').removeClass('clicked')});
</script>

Ps : I also tried to use another plugin like HTML5 video player (Plyr), it kind of works but Laytheme seams to block something, I have the sound but a black screen instead of the video.

[Baptiste]

Ok I'll answer to my own question for people who ask or have the same issue haha. If you use the iframe, using the vimeo api is, for the moment, the best way I found to solve that problem for Firefox and Chrome.

Insert the iframe :

 <div class="iframeVimeo" style="padding:56.25% 0 0 0;position:relative;"><iframe src="yourvideocolor=ffffff&title=0&byline=0&portrait=0" style="position:absolute;top:0;left:0;width:100%;height:100%;" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe></div>

Add css to block the pointer event on that iframe :

.iframeVimeo iframe { pointer-events: none; }

And then add the JS for the api and the click on the play button :

 <script src="https://player.vimeo.com/api/player.js"></script>

<script type="text/javascript">
var player = new Vimeo.Player(document.querySelector('.iframeVimeo iframe'));
var iframe = document.querySelector('.iframeVimeo').addEventListener('click', function() {
    player.getPaused().then(function(paused) {
        if (paused) {
            player.play();
        } else {
            player.pause();
        }
    }).catch(function(error) {
    });
});</script>

It should works ✌️