Results 1 to 8 of 8

Thread: Enable a full screen for embed youtube video

  1. #1
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Lightbulb 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?

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,098
    Thanks
    1
    Thanked 208 Times in 204 Posts

    Default

    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
    ~ the original bald headed old fart ~

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

    balki (12-02-2017)

  4. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,407
    Thanks
    77
    Thanked 3,432 Times in 3,393 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

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

    balki (12-02-2017)

  6. #4
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Unhappy

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

    Quote Originally Posted by jscheuer1 View Post
    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;
    }
    Last edited by balki; 12-03-2017 at 11:00 AM.

  7. #5
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,098
    Thanks
    1
    Thanked 208 Times in 204 Posts

    Default


    Quote Originally Posted by balki View Post
    "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...


    coothead
    ~ the original bald headed old fart ~

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

    balki (12-03-2017)

  9. #6
    Join Date
    Jun 2011
    Posts
    63
    Thanks
    49
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by coothead View Post
    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.

  10. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    1,098
    Thanks
    1
    Thanked 208 Times in 204 Posts

    Default


    Quote Originally Posted by balki View Post
    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
    ~ the original bald headed old fart ~

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

    balki (12-05-2017)

  12. #8
    Join Date
    Nov 2017
    Posts
    5
    Thanks
    0
    Thanked 2 Times in 2 Posts

    Default

    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>

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

    balki (12-05-2017)

Similar Threads

  1. embed YouTube channel?
    By mlegg in forum HTML
    Replies: 6
    Last Post: 01-31-2013, 07:40 PM
  2. Loading YouTube videos using the most recent YouTube embed code
    By molendijk in forum Submit a DHTML or CSS code
    Replies: 11
    Last Post: 05-28-2012, 11:04 PM
  3. Question Regarding Embed Youtube
    By Didymus in forum Looking for such a script or service
    Replies: 1
    Last Post: 01-23-2011, 11:22 PM
  4. embed youtube video problem
    By biomike in forum HTML
    Replies: 6
    Last Post: 01-14-2010, 09:03 AM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •