Log in

View Full Version : 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:

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



<!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.


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

Embedding disables fullscreen option. I do not know why.

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

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

Could this solve the problem?

embed,
iframe,
object {
max-width: 100%!important;
max-height: 100%!important;
}
coothead
12-03-2017, 11:43 AM
"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 (http://forums.mozillazine.org/viewforum.php?f=38&sid=1125234790477650272ff39cbd776f76)


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


<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