YouTube iframe embed - full screen

Question

I have a form that is iframed into a web page. Upon completion of the form, a YouTube video is displayed from using iframe embed.

When I enter full screen mode of th

Answer 1

Adding allowfullscreen="allowfullscreen" and altering the type of YouTube embed fixed my issue.

Answer 2

I found a solution that worked for me on this page thanks to someone named @orangecoat-ciallella

https://www.drupal.org/node/1807158

The "full screen" button was not working in my Chrome browser on Ubuntu.

I was using the media_youtube module for D6. In the iframe it was using a video URL of the pattern //www.youtube.com/v/videoidhere.

I used the theme preprocessing function to make it output > //www.youtube.com/embed/videoidhere and it immediately started allowing the fullscreen button to work.

In short, try changing the /v/ to /embed/ in the YouTube URL if you're having a problem.

Answer 3

we can get the code below the video. In the share option, we will have an option embed. If we click on the embed we will get the code snippet for that video.

which will be similar to the below code

<iframe width="560" height="315" src="https://www.youtube.com/embed/GZh_Kj1rS74" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

The above code will help you to get the full-screen option.

Answer 4

The best solution and the easiest one to achieve this by using this simple code:

<iframe id="player" src="URL" allowfullscreen></iframe>

Tested and working for all browsers without issues.

Thank you

Answer 5

I had to add allowFullScreen attribute to the "parent" iframe. The case of the attribute does matter. I don't think Firefox or Edge/IE11 has a browser specific allowFullScreen attribute. So it looks something like this:

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>

Answer 6

Inserting after the outer-most iframe from inside the nested iframe fixed the issue for me.

var outerFrame = parent.parent.parent.$('.mostOuterFrame');
parent.$('<iframe />', {
    src: 'https://www.youtube.com/embed/BPlsqo2bk2M'
    }).attr({'allowfullscreen':'allowfullscreen',                             'frameborder':'0' 
    }).addClass('youtubeIframe')
        .css({
            'width':'675px',
            'height':'390px',
            'top':'100px',
            'left':'280px',
            'z-index':'100000',
            'position':'absolute'
         }).insertAfter(outerFrame);