YouTube iframe embed - full screen

HtmlIframe

Html Problem Overview

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 the YouTube video, nothing really happens.

Is the fullscreen of the nested iframe constrained by the dimensions of the parent iframe?

Html Solutions

Solution 1 - Html

In the current YouTube iframe (2021), you have to add fullscreen to the allow attribute:

<iframe allow="fullscreen;">

If I understand correctly you have an iframe that contains a second iframe (the youtube one).
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>

Solution 2 - Html

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

Without camel-case, react strips these tags out!

Solution 3 - Html

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

Solution 4 - Html

In HTML5, simply use:

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

This attribute can be set to true if the frame is allowed to be placed into full-screen mode by calling it's Element.requestFullscreen() method. If this isn't set, the element can't be placed into full-screen mode. See Mozilla Docs

In React.js framework use property allowFullScreen.

Note that there are more answers pointing to different directions, so hope this post will unite and simplify all mentioned with latest valid approach.

Solution 5 - Html

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:

Solution 6 - Html

Putting allowfullscreen inside iframe tag without setting it to true is already deprecated. The updated answer for this issue which is fullscreen is not available with embedded YouTube videos is to set allowfullscreen to true inside

Solution 7 - Html

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

Solution 8 - Html

jut add allowfullscreen="true" to iframe

  <iframe src="URL here" allowfullscreen="true"> </iframe>

Solution 9 - Html

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.

Solution 10 - Html

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.

Solution 11 - Html

If adding allowfullscreen does not help, make sure you don't have &fs=0 in your iframe url.

Solution 12 - Html

You need to add these two attributes allow="fullscreen;" allowfullscreen to your iframe tag like this:

<iframe ...  allow="fullscreen;" allowfullscreen >
</iframe>

Note: for my case, adding just allowfullscreen was not enough to enable fullscreen mode on website.

Solution 13 - Html

easiest way to achieve this in 2021 is: Go to your desired youtube video, click share and pick embed. Copy and paste the code to your html and you are good to go!

Solution 14 - Html

Tested this below code on Edge & Chrome. Expands to full browser view, but not full-screen. I had to stick to this workaround as none of the above solutions worked for my case.

This also immediately auto-plays the video muted though.

<html>
<head>
<body>
<iframe src="https://www.youtube.com/embed/742lIJQVlSg?mute=1&autoplay=1"  frameborder="0" marginheight="0" marginwidth="0" width="100%" height="100%" scrolling="auto" allowfullscreen></iframe>
</body>
</head>
</html>

Solution 15 - Html

I managed to find a relatively clean straightforward way to do this. To see it working click on my webpage: http://developersfound.com/yde-portfolio.html and hover over the 'Youtube Demos' link.

Below 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>

Assume 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've also checked this against the W3c Validator and it validates a HTML5 with no errors.

It is also important to note that: Youtube embed URLs sometimes check to see if the request is coming from a server so it may be necessary to set up your test environment to listen on your external IP. So you may need to set up port forwarding on your router for this solution to work. Once you've set up port forwarding just test from the external IP instead of LocalHost. Remember that some routers need port forwarding from LocalHost/loopback but most use the same IP that you used to log into the router. For example if your router login page is 192.168.0.1, then the port forward would have to use 192.168.0.? where ? could be any unused number (you may need to experiment). From this address you would add the ports that your test environment listen from (normally 80, 81, 8080 or 8088).

Solution 16 - Html

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);

Solution 17 - Html

Noticed mine worked on chrome. Got it to work in Firefox by going to <about:config> and setting full-screen-api.allow-trusted-requests-only to false.

After full screen worked once, I could set that back to true, and full screen still worked which was quite perplexing.

Categories
Recommended Html Solutions
Recommended Iframe Solutions

Previous Solution:

How to check if the user gave permission to use the camera?

IosSwift

Next Solution:

Undo git add --all

GitGit Add

Attributions

All content for this solution is sourced from the original question on Stackoverflow.

The content on this page is licensed under the Attribution-ShareAlike 4.0 International (CC BY-SA 4.0) license.

Content TypeOriginal AuthorOriginal Content on Stackoverflow
Questionuser147215View Question on Stackoverflow
Solution 1 - HtmlCdBView Answer on Stackoverflow
Solution 2 - HtmldanschView Answer on Stackoverflow
Solution 3 - Htmluser147215View Answer on Stackoverflow
Solution 4 - HtmlJuroshView Answer on Stackoverflow
Solution 5 - HtmlMatt GooView Answer on Stackoverflow
Solution 6 - HtmlJeanne vieView Answer on Stackoverflow
Solution 7 - HtmlJodyshopView Answer on Stackoverflow
Solution 8 - HtmlAkitha_MJView Answer on Stackoverflow
Solution 9 - HtmlsameerView Answer on Stackoverflow
Solution 10 - HtmlJason SilverView Answer on Stackoverflow
Solution 11 - HtmlzkytonyView Answer on Stackoverflow
Solution 12 - HtmlAli SafariView Answer on Stackoverflow
Solution 13 - HtmlClarissa AudreyView Answer on Stackoverflow
Solution 14 - HtmlShankar Narayana DamodaranView Answer on Stackoverflow
Solution 15 - Htmluser2288580View Answer on Stackoverflow
Solution 16 - HtmlAlan KingView Answer on Stackoverflow
Solution 17 - HtmlGweefView Answer on Stackoverflow