TransWikia.com

Set fullscreen to vimeo player using Blazor hosted

Stack Overflow Asked by Oscar Cabrera Rodríguez on December 30, 2020

I have succesfully embed a vimeo player in my Blazor app. Now my client requested to display the fullscreen control. According to the documentation it should go like this:

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

and indeed, if I put it like this it certainly displays the fullsreen control. The problem is that I need that the video src to be dynamic, thus, my code is like this:

        <iframe src="@videoSrc" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

And then, the fullscreen control won’t display anymore. Trying to dig into the issue, inspecting the html that gets created, the difference is that in the latter, the player is created with a no-fullscreen-support.
I would really appreciate any help.

One Answer

So, this is how I solved my problem. Per the docs here I was using the player like this:

<iframe src="https://player.vimeo.com/video/76979871" width="640" height="360" frameborder="0" allowfullscreen allow="autoplay; encrypted-media"></iframe>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var iframe = document.querySelector('iframe');
    var player = new Vimeo.Player(iframe);

    player.on('play', function() {
        console.log('played the video!');
    });

    player.getVideoTitle().then(function(title) {
        console.log('title:', title);
    });
</script>

But it looks like for some reason Blazor wraps the iFrame in such a way that makes the Vimeo player not to be able to go fullscreen.

I changed to this, per the docs here. In this case, the options.id is the videoSrc/videoUrl

<div id="made-in-ny"></div>

<script src="https://player.vimeo.com/api/player.js"></script>
<script>
    var options = {
        id: 59777392,
        width: 640,
        loop: true
    };

    var player = new Vimeo.Player('made-in-ny', options);

    player.setVolume(0);

    player.on('play', function() {
        console.log('played the video!');
    });
</script>

Correct answer by Oscar Cabrera Rodríguez on December 30, 2020

Add your own answers!

Ask a Question

Get help from others!

© 2024 TransWikia.com. All rights reserved. Sites we Love: PCI Database, UKBizDB, Menu Kuliner, Sharing RPP