YouTube iframe embed - full screen

Question

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

User · Answer

jut add allowfullscreen  quot true quot  to iframe    lt iframe src  quot URL here quot  allowfullscreen  quot true quot  gt   lt  iframe gt

User · Answer

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  lt iframe width  quot 560 quot  height  quot 315 quot  src  quot https   www youtube com embed GZh Kj1rS74 quot  frameborder  quot 0 quot  allow  quot accelerometer  autoplay  clipboard-write  encrypted-media  gyroscope  picture-in-picture quot  allowfullscreen gt  lt  iframe gt   The above code will help you to get the full-screen option

User · Answer

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    lt  DOCTYPE html gt   lt html gt   lt head gt       lt title gt iFrame Container lt  title gt       lt script type  text javascript  src  js jquery-2 1 4 min js  gt  lt  script gt       lt style type  text css  gt  OBJ-1   border none    lt  style gt       lt script gt            document  ready function                     myHiddenButton   trigger  click                     lt  script gt   lt  head gt    lt body gt        lt section style  visibility  hidden   gt           lt button id  myHiddenButton  onclick    location  attr  href     http   www youtube com embed wtwOZMXCe-c version 3 amp amp start 0 amp amp rel 0 amp amp fs 1 amp amp wmode transparent      gt View Full Screen lt  button gt       lt  section gt        lt section class  main-area-inner  style  background transparent margin-left auto margin-right auto position relative width 1080px height 720px   gt           lt iframe src  http   www youtube com embed wtwOZMXCe-c version 3 amp amp start 0 amp amp rel 0 amp amp fs 1 amp amp wmode transparent           class  OBJ-1  style  position absolute left 79px top 145px width 1080px height 720px   gt           lt  iframe gt       lt  section gt    lt  body gt    lt  html gt    Assume this is the DOM that loads the iFrame    lt  DOCTYPE html gt   lt html gt   lt head gt       lt meta http-equiv  Content-Type  content  text html  charset UTF-8  gt       lt meta name  viewport  content  width device-width  initial-scale 1  maximum-scale 1  gt       lt title gt Full Screen Youtube lt  title gt       lt script type  text javascript  src  js jquery-2 1 4 min js  gt  lt  script gt       lt script gt            document  ready function                        lt  script gt   lt  head gt    lt body gt        lt iframe name  iframe-container  id  iframe-container  src  yde-home html  style  width  100   height  100    gt           lt p gt Your browser does not support iFrames lt  p gt       lt  iframe gt    lt  body gt    lt  html gt    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

User · Answer

The best solution and the easiest one to achieve this by using this simple code    lt iframe id  player  src  URL  allowfullscreen gt  lt  iframe gt    Tested and working for all browsers without issues   Thank you

User · Answer

Inserting after the outer-most iframe from inside the nested iframe fixed the issue for me                     var outerFrame   parent parent parent     mostOuterFrame    parent     lt iframe   gt          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

User · Answer

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

User · Answer

In HTML5  simply use    lt iframe src  https   www youtube com embed ID  allowfullscreen   gt     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

User · Answer

Noticed mine worked on chrome  Got it to work in Firefox by going to  lt about config gt  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

User · Answer

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

User · Answer

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    lt iframe allowFullScreen  allowFullScreen  src  http   api youtube com       gt

User · Answer

React JS People  remember allowFullScreen and frameBorder  0   Without camel-case  react strips these tags out

User · Answer

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    lt iframe src  your page url           allowfullscreen  allowfullscreen          mozallowfullscreen  mozallowfullscreen           msallowfullscreen  msallowfullscreen           oallowfullscreen  oallowfullscreen           webkitallowfullscreen  webkitallowfullscreen  gt   lt  iframe gt

User · Answer

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  tag     lt iframe     id  player      src  URL here      allowfullscreen  true  gt   lt  iframe gt    Tested and working for all browsers without issues

User · Answer

If adding allowfullscreen does not help  make sure you don t have  amp fs 0 in your iframe url

[html] YouTube iframe embed - full screen

Examples related to html

Examples related to iframe