how to create a youtube video in full screen with back button?

Asked

Viewed 1,708 times

2

Guys, I need to create a player on my site, that when clicking the watch button, open it in full screen and contain a "back" button for the user to return home. It would be possible to do this using the youtube player?

  • 3

    Youtube embed code no longer does that?

  • Using Bootstrap? you can open a modal of the size you want with the video embed code on youtube.

2 answers

1

Friend, you can simulate the full screen as follows:

In HTML you create a template structure that will be used within a modal window:

<script type="text/template" id="video_1">
<iframe width="100%" height="720px" src="https://www.youtube.com/embed/LGApONHq8LI?feature=player_embedded" frameborder="0" allowfullscreen></iframe>

<a href="link voltar"> Voltar</a>
</script>

<a href="javascript:void(0);" class="video" data-id="1">Vídeo</a>

then you create the modal structure:

<div id="modal_video"></div>

I didn’t create the modal, just put the video in a div to get an idea.

jQuery:

$('.video').click(function(){
    var idVideo = $(this).data('id');
    var video = $('#video_'+idVideo).html();
    $('#modal_video').html(video);
});

The return link you can change to close since the user will not leave the page, just close the modal. follows the example of the operation: https://jsfiddle.net/vsytwd7e/

0

In this way the video opens in another window, occupying all the space of the same, so if the user wants to return to the site is just close it, I do not think there is method of automatically open in fullscreen because it would be invasive to the user.

<a href="https://www.youtube.com/v/GsF1jnTjRLo?autoplay=1" target="_blank">assistir</a>

the https://www.youtube.com/v/GsF1jnTjRLo

is different from https://www.youtube.com/watch?v=GsF1jnTjRLo

precisely because the first occupies the whole page, and the second goes to the link on youtube

Browser other questions tagged

You are not signed in. Login or sign up in order to post.