Best IT Recipes

YouTube iframe embed - full screen

I have a form that iframed on a web page. When the form is completed, the YouTube video is displayed using iframe embed.

When I enter the full screen mode of a YouTube video, nothing really happens.

Is nested iframe fullscreen mode limited by the size of the parent iframe?

+58
html iframe
Dec 31 '15 at 16:00
source share
11 answers

Adding allowfullscreen="allowfullscreen" and changing the embed type of YouTube fixed my problem.

+20
Jan 07 '15 at 7:17
source share

If I understand correctly, you have an iframe containing the second iframe (one of them).
Try adding the allowfullscreen attribute to the "parent" iframe.

For full browser support, it should look like this:

 <iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>
+126
Jan 05 '15 at 17:33
source share

React.JS People, remember allowFullScreen and frameBorder="0"

Without a camel case, respond to the stripes of these tags!

+38
Mar 24 '16 at 15:33
source share

I had to add the allowFullScreen attribute to the "parent" iframe. The case with the attribute matters. I do not think that Firefox or Edge / IE11 have a browser-specific attribute allowFullScreen. So it looks something like this:

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

+11
Jul 14 '16 at 22:56
source share

In HTML5, just use:

 <iframe src="https://www.youtube.com/embed/ID" allowfullscreen />

This attribute can be set to true if the frame is allowed to enter full-screen mode by calling its Element.requestFullscreen() method. If this is not set, the item cannot be put into full-screen mode. View Mozilla Docs

In the React.js framework, use the allowFullScreen property.

Please note that there are more answers pointing in different directions, so I hope that this post will combine and simplify everything mentioned with the last suitable approach.

+6
Jan 24 '18 at 18:50
source share

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 did not work in the Chrome browser on Ubuntu.

I used the media_youtube module for D6. In the iframe, he used the URL of the video //www.youtube.com/v/videoidhere.

I used the theme preprocessing function to display> //www.youtube.com/embed/videoidhere and it immediately started allowing the full-screen button to work.

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

+1
May 29 '15 at 16:33
source share

If adding allowfullscreen doesn’t help, make sure that your allowfullscreen iframe doesn’t have &fs=0 .

0
Mar 03 '19 at 22:42
source share

The best and easiest solution to achieve this with this simple code:

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

Tested and works for all browsers without problems.

thank

0
Apr 13 '19 at 21:48
source share

I managed to find a relatively clean easy way to do this. To see this, click on my web page: http://developersfound.com/yde-portfolio.html and hover over the link "Youtube Demos".

The following are two snippets to show how this can be done quite easily:

I achieved this with an iFrame. Assuming this DOM is "yde-home.html", which is the source of your iFrame.

 <!DOCTYPE html> <html> <head> <title>iFrame Container</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <style type="text/css">.OBJ-1 { border:none; }</style> <script> $(document).ready(function() { $('#myHiddenButton').trigger('click'); }); </script> </head> <body> <section style="visibility: hidden;"> <button id="myHiddenButton" onclick="$(location).attr('href', '"http://www.youtube.com/embed/wtwOZMXCe-c?version=3&amp;start=0&amp;rel=0&amp;fs=1&amp;wmode=transparent;");">View Full Screen</button> </section> <section class="main-area-inner" style="background:transparent;margin-left:auto;margin-right:auto;position:relative;width:1080px;height:720px;"> <iframe src="http://www.youtube.com/embed/wtwOZMXCe-c?version=3&amp;start=0&amp;rel=0&amp;fs=1&amp;wmode=transparent;" class="OBJ-1" style="position:absolute;left:79px;top:145px;width:1080px;height:720px;"> </iframe> </section> </body> </html>

Suppose this is the DOM that loads the iFrame.

 <!DOCTYPE html> <html> <head> <meta http-equiv='Content-Type' content='text/html; charset=UTF-8'> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>Full Screen Youtube</title> <script type="text/javascript" src="js/jquery-2.1.4.min.js"></script> <script> $(document).ready(function() {}); </script> </head> <body> <iframe name="iframe-container" id="iframe-container" src="yde-home.html" style="width: 100%; height: 100%;"> <p>Your browser does not support iFrames</p> </iframe> </body> </html>

I also tested this against the W3c Validator, and it checks HTML5 without errors.

It is also important to note that: Youtube embed URLs sometimes check to see if a request is coming from the server, so you might need to set up a test environment to listen on an external IP address. Therefore, you may need to configure port forwarding on the router for this solution to work. Once you have configured port forwarding, just check the external IP address instead of LocalHost. Remember that some routers need port forwarding from LocalHost / loopback, but most use the same IP address that you used to enter the router. For example, if your router login page is 192.168.0.1, then you will have to use 192.168.0 for port forwarding.? Where? can be any unused number (you may need to experiment). From this address you will add the ports from which the test environment will be listened (usually 80, 81, 8080 or 8088).

-one
Dec 06 '15 at 17:50
source share

Inserting after an external iframe from within a nested iframe fixed the problem 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);
-one
May 04 '16 at 12:37
source share

I noticed mine, worked on chrome. To make it work in Firefox , go to full-screen-api.allow-trusted-requests-only <about:config> and set the full-screen-api.allow-trusted-requests-only parameter to false .

After the full-screen mode worked once, I was able to set it to true, and the full screen still worked, which was rather perplexing.

-one
May 27 '19 at 13:08
source share


More articles:


All Articles