Enable a full screen for embed youtube video

Printable View

11-30-2017, 08:28 PM
balki

Enable a full screen for embed youtube video

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?:)
12-01-2017, 09:31 AM
coothead

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
12-01-2017, 12:39 PM
jscheuer1

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.
12-03-2017, 10:48 AM
balki

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

Quote:

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; }
12-03-2017, 11:43 AM
coothead

Quote:

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
12-03-2017, 12:18 PM
balki

Quote:

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.
12-03-2017, 12:35 PM
coothead

Quote:

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
12-05-2017, 02:00 AM
jymony

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>
01-03-2018, 09:33 AM
Surya321

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

<iframe allowFullScreen='allowFullScreen' src='http://api.youtube.com/...'/>
01-24-2018, 10:31 AM
Sunny_surya

Thank You