AnswerBun.com

Set fullscreen to vimeo player using Blazor hosted

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.

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

1 Answers

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!

Related Questions

VBA Chart set a manuel Y-Axis Scale

2  Asked on December 31, 2020 by user9741285

   

How to group already stacked bars when using R ggplot and geom_bar

2  Asked on December 30, 2020 by christophe-antoniewski

     

How can I learn the python 3x interpreter?

1  Asked on December 30, 2020 by sproulel

   

how to get grid id as string in c#

1  Asked on December 30, 2020 by dr-engg

     

find entry with needed information

3  Asked on December 29, 2020 by ashley

     

Heroku error: bash: web:: command not found

2  Asked on December 29, 2020 by fayewaii

     

regex to match question sentences in long text

1  Asked on December 29, 2020 by duke-wellington

   

Issues with linking Javascript files with Node.js and HTML

2  Asked on December 29, 2020 by coder-husk

 

Ask a Question

Get help from others!

© 2022 AnswerBun.com. All rights reserved.