Enable a full screen for embed youtube video

**balki** · 11-30-2017, 08:28 PM

Hello,

I can't enable a full screen for embed youtube video in iframe.
This is the code:

HTML Code:

<a href="https://www.youtube.com/embed/kXptPzKNMq4?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" target="display">Title</a><br>


<div style="background-image: url(); background-repeat: no-repeat; float: left; height: 539px; padding: 0px; width: 658px;">
	<div style="float: left; height: 221px; margin: 79px 0px 0px 81px; padding: 0px; width: 393px;">
		<iframe allowfullscreen="" frameborder="0" height="279" id="display" name="display" width="497"></iframe>
	</div>
</div>

Can you solve the problem, please?

**coothead** · 12-01-2017, 09:31 AM

Hi there balki,

This code works OK for me on desktop and mobile devices...

Code:


<!DOCTYPE HTML>
<html lang="en">
<head>

<meta charset="utf-8">
<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">

<title>untitled document</title>

<link rel="stylesheet" href="screen.css" media="screen">

<style media="screen">
body {
    background-color: #f0f0f0;
    font: 1em/162% verdana, arial, helvetica, sans-serif;
 }

#iframe-holder {
    width: 31em;      
    padding: 5em; 
    margin-top: 0.5em;
    background-color: #333;
    background-image: url(); 
    background-repeat: no-repeat; 
    background-size: 100% auto;
 }

#iframe-holder iframe {
    display:block;
    border: 0;
 }

@media ( max-width:42em ) {
#iframe-holder {
    width: 25em;      
    padding: 2.5em; 
  }
#iframe-holder iframe {
    width: 25em;
    height:14em;
  }
 }

@media ( max-width:31em ) {
#iframe-holder {
    width: 17em;      
    padding: 0.5em; 
  }
#iframe-holder iframe {
    width: 17em;
    height: 9.52em;
  }
 }
</style>

</head>
<body> 

 <a href="https://www.youtube.com/embed/kXptPzKNMq4?autoplay=1&rel=0&enablejsapi=1&playerapiid=ytplayer" target="display">Title</a>

 <div id="iframe-holder">
   <iframe name="display" width="496" height="278" allowfullscreen></iframe>
 </div>

</body>
</html>

coothead

**jscheuer1** · 12-01-2017, 12:39 PM

I think one major part of this is that if you are using YT iframe embed, the allowfullscreen attribute of the iframe either has to be set to something non-false that's valid for it, or be set without any value, not an empty one, which is basically falsey. So:

allowfullscreen="allowfullscreen"

or just:

allowfullscreen

should be fine. But:

allowfullscreen=""

probably means 'not'.

I think the params of the video also may play a role.

**balki** · 12-03-2017, 10:48 AM

Unfortunately in Mozilla Firefox fullscreen is not active. I tried your advice.

Originally Posted by jscheuer1

I think the params of the video also may play a role.

Embedding disables fullscreen option. I do not know why.

Code:

<iframe src="https://www.youtube.com/embed/kXptPzKNMq4" width="640" height="360" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

-----------------------------

Could this solve the problem?

Code:

embed,
iframe,
object {
max-width: 100%!important;
    max-height: 100%!important;
}

**coothead** · 12-03-2017, 11:43 AM

Originally Posted by balki

"Unfortunately in Mozilla Firefox fullscreen is not active."

The code that I supplied works perfectly in my test browser - Firefox 52.5.0 ( 64-bit ) ESR.

Are you saying that it does not work in the latest Firefox Quantum browser?

If so then you should probably take this problem here...

Firefox Support Forum

coothead

**balki** · 12-03-2017, 12:18 PM

Originally Posted by coothead

The code that I supplied works perfectly in my test browser - Firefox 52.5.0 ( 64-bit ) ESR.

Thanks! It really works. I tested the code on the site www.w3schools.com and it does not work there.

**coothead** · 12-03-2017, 12:35 PM

Originally Posted by balki

I tested the code on the site www.w3schools.com

Always test code directly in bona fide browsers rather
than in w3schools.com's nefarious test pages.

coothead

**jymony** · 12-05-2017, 02:00 AM

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:

Code:

<iframe src="your_page_url" 
        allowfullscreen="allowfullscreen"
        mozallowfullscreen="mozallowfullscreen" 
        msallowfullscreen="msallowfullscreen" 
        oallowfullscreen="oallowfullscreen" 
        webkitallowfullscreen="webkitallowfullscreen"> 
</iframe>

**Surya321** · 01-03-2018, 09:33 AM

Adding allowfullscreen="allowfullscreen" & altering the type of YouTube embed solved my error.

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

**Sunny_surya** · 01-24-2018, 10:31 AM

Thank You

Thread: Enable a full screen for embed youtube video

Thread Tools

Search Thread

Enable a full screen for embed youtube video

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to jscheuer1 For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to coothead For This Useful Post:

The Following User Says Thank You to jymony For This Useful Post:

Similar Threads

embed YouTube channel?

Loading YouTube videos using the most recent YouTube embed code

Question Regarding Embed Youtube

embed youtube video problem

Bookmarks

Bookmarks

Posting Permissions