Stack Overflow
Stack Overflow

Questions tagged [youtube-iframe-api]

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript.

The IFrame player API lets you embed a YouTube video player on your website and control the player using JavaScript. Unlike the Flash and JavaScript player APIs, which both involve embedding a Flash object on your web page, the IFrame API posts content to an <iframe> tag on your page. This approach provides more flexibility than the previously available APIs since it allows YouTube to serve an HTML5 player rather than a Flash player for mobile devices that do not support Flash.

YouTube Player API Reference: https://developers.google.com/youtube/iframe_api_reference

813 questions
8
votes
0 answers

show playlist menu in youtube embed

In the top left corner of a youtube playlist embed there is a button to open the playlist menu. I'm trying to have this list opened programatically in the page load. Is there a way to accomplish that? I think this can be accomplished with…
incompleteness
  • 260
  • 1
  • 12
8
votes
3 answers

Detect youtube video events with Chrome extension content script

I'm writing a Chrome extension and I want to detect when a video starts/ends while a user is on youtube.com watching videos. The difference between my situation and other tutorials I've read is I'm not embedding my own youtube video on my own site,…
GabeMeister
  • 1,668
  • 4
  • 22
  • 28
8
votes
2 answers

Chrome update block flash autoplay - how avoid it?

I embedded a youtube video in a html page. I use the youtube iframe API with Flash (in my case, I cannot use an HTML5 video). Since the last Google Chrome update, Chrome block the autoplay and avoid to play/pause programmatically a video (…
Damien Romito
  • 9,801
  • 13
  • 66
  • 84
8
votes
3 answers

Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "file://"

I have a URL for youtube : If i use this in my local html file it plays well. But when i paste the same in a phonegap ios app html…
Manish Kumar
  • 10,214
  • 25
  • 77
  • 147
7
votes
2 answers

YouTube iframe looping video unavailable on first load

I embed a video on a Blazor-powered static page. I want the video to loop. According to docs (https://developers.google.com/youtube/player_parameters#loop), I need to have both loop and playlist params. Easy enough. So I generate URL like this:…
TehGM
  • 211
  • 1
  • 8
7
votes
3 answers

Remove unused Javascript base.js (Youtube iframe api)

Google PageSpeedInsights flags Base.js as unused Javascript in my report. It's pretty substantial at 487kb. Appears to come from including the Youtube player iframe api. Is this file needed and if so, does anyone know why it is being flagged as…
nateM
  • 502
  • 4
  • 10
  • 25
7
votes
2 answers

CSP for embedding youtube video

I've just started seeing this with my embedded youtube videos on Chrome (86.0.4240.193 - recently updated which is probably why I'm just seeing this) - these are 'reports' only, so the videos still show but 100s of errors can't be right! This is…
user1731154
  • 83
  • 1
  • 1
  • 6
7
votes
1 answer

Playback on other websites has been disabled by the video owner (But it's not)

Please check this video. It's one from my video channel https://www.youtube.com/watch?v=lgFXZP8K7Ew My problem is when I embed this video on my site it shows me this message (https://ibb.co/r3mvsfH). But "Allow Embedding" is checked on the video…
shadnanm
  • 71
  • 1
  • 3
7
votes
1 answer

Google search YouTube iframe errors

Some pages of my site contain youtube videos and recently I noticed they were shown with bad description. To be exact it only shows: Your browser does not currently recognize any of the video formats available. Click here to visit our frequently…
Gag Er
  • 71
  • 2
6
votes
1 answer

Embedding youtube-iframe fails within sandbox-iframe

When embedding a youtube-iframe into another iframe, which is sandboxed (to prevent XSS) the player stays black in all major browser. See https://jsfiddle.net/ms9fwLbk/ Sandbox iframe youtube…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/youtube-api" class="post-tag grid--cell" title="show questions tagged 'youtube-api'" rel="tag">youtube-api</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 20 '20 at 16:56">asked Jan 20 '20 at 16:56</time> <a href="../../users/12749155/reinhard-hofmann" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/12749155.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Reinhard Hofmann" /> </a> <div class="s-user-card--info"> <a href="../../users/12749155/reinhard-hofmann" class="s-user-card--link">Reinhard Hofmann</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">61</li> <li class="s-award-bling s-award-bling__silver" title="1 silver badges">1</li> <li class="s-award-bling s-award-bling__bronze" title="4 bronze badges">4</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-54363321"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/54363321/hide-related-videos-youtube-iframe-api" class="question-hyperlink">Hide related videos Youtube Iframe API</a></h3> <div class="excerpt">I am trying to hide related videos that shows up when you pause a video but as I found out from similar questions that as of September 25th 2018 there is no way to disable the related videos from displaying. The effect of the change is that you…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Jan 25 '19 at 10:24">asked Jan 25 '19 at 10:24</time> <a href="../../users/7085305/dragonborn" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7085305.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="DragonBorn" /> </a> <div class="s-user-card--info"> <a href="../../users/7085305/dragonborn" class="s-user-card--link">DragonBorn</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">1,809</li> <li class="s-award-bling s-award-bling__gold" title="5 gold badges">5</li> <li class="s-award-bling s-award-bling__silver" title="20 silver badges">20</li> <li class="s-award-bling s-award-bling__bronze" title="44 bronze badges">44</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-52268100"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/52268100/using-youtube-api-with-angular-6-typescript" class="question-hyperlink">Using Youtube API with Angular 6 (Typescript)</a></h3> <div class="excerpt">I'm able to get the Youtube Iframe API (somehow) working in my Angular 6 application. However, I would like to however feed it dynamic videoIds from a list that I control. My plan is to listen to events from the player and then load another video…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/angular" class="post-tag grid--cell" title="show questions tagged 'angular'" rel="tag">angular</a> <a href="../../questions/tagged/youtube" class="post-tag grid--cell" title="show questions tagged 'youtube'" rel="tag">youtube</a> <a href="../../questions/tagged/youtube-api" class="post-tag grid--cell" title="show questions tagged 'youtube-api'" rel="tag">youtube-api</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Sep 11 '18 at 03:06">asked Sep 11 '18 at 03:06</time> <a href="../../users/10345036/noel-r" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10345036.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Noel R." /> </a> <div class="s-user-card--info"> <a href="../../users/10345036/noel-r" class="s-user-card--link">Noel R.</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">133</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="6 bronze badges">6</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-52062050"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/52062050/youtube-iframe-player-shows-this-video-is-unavailable-when-play-button-is-pres" class="question-hyperlink">YouTube IFrame Player shows 'This Video is Unavailable' when play button is pressed</a></h3> <div class="excerpt">I embedded YouTube iframe player into my ios application. Everything was working and loading fine then couple days ago when testing the app, I noticed that it no longer plays certain videos and I'm not sure what's causing it. I tested this with…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/ios" class="post-tag grid--cell" title="show questions tagged 'ios'" rel="tag">ios</a> <a href="../../questions/tagged/swift" class="post-tag grid--cell" title="show questions tagged 'swift'" rel="tag">swift</a> <a href="../../questions/tagged/youtube" class="post-tag grid--cell" title="show questions tagged 'youtube'" rel="tag">youtube</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Aug 28 '18 at 16:02">asked Aug 28 '18 at 16:02</time> <a href="../../users/10281276/shukti" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/10281276.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Shukti" /> </a> <div class="s-user-card--info"> <a href="../../users/10281276/shukti" class="s-user-card--link">Shukti</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">211</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-50023637"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status "> <strong>0</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/50023637/event-emitter-for-esc-key-within-youtube-iframe-api" class="question-hyperlink">Event Emitter for "ESC" Key within YouTube iframe API</a></h3> <div class="excerpt">Situation I am currently embedding a YouTube iframe on my page and am loading it on top of a popup modal. When I press 'ESC', I can close out the popup modal but if the user has their tab-focus on something within the YouTube player, the browser is…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/javascript" class="post-tag grid--cell" title="show questions tagged 'javascript'" rel="tag">javascript</a> <a href="../../questions/tagged/iframe" class="post-tag grid--cell" title="show questions tagged 'iframe'" rel="tag">iframe</a> <a href="../../questions/tagged/accessibility" class="post-tag grid--cell" title="show questions tagged 'accessibility'" rel="tag">accessibility</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked Apr 25 '18 at 13:28">asked Apr 25 '18 at 13:28</time> <a href="../../users/8400897/calvin" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/8400897.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="Calvin" /> </a> <div class="s-user-card--info"> <a href="../../users/8400897/calvin" class="s-user-card--link">Calvin</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">205</li> <li class="s-award-bling s-award-bling__silver" title="4 silver badges">4</li> <li class="s-award-bling s-award-bling__bronze" title="14 bronze badges">14</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="mln24"> <div class="question-summary" id="question-summary-43867417"> <div class="statscontainer"> <div class="stats"> <div class="vote"> <div class="votes"> <span class="vote-count-post"><strong>6</strong></span> <div class="viewcount">votes</div> </div> </div> <div class="status answered-accepted"> <strong>2</strong> answers </div> </div> </div> <div class="summary"> <h3><a href="../../questions/43867417/ecver-x-parameter-on-the-youtube-embed-url" class="question-hyperlink">"...?ecver=x..." parameter on the youtube embed URL</a></h3> <div class="excerpt">I've Noticed when embedding Youtube videos the following 2 URLs achieve the same result: https://www.youtube.com/embed/ML1AyQC2HKM?ecver=2&modestbranding=1&rel=0 https://www.youtube.com/embed/kwdRYaBUco4?modestbranding=1&rel=0 embeded youtube video…</div> <div class="grid ai-start jc-space-between fw-wrap"> <div class="grid gs4 fw-wrap tags "> <a href="../../questions/tagged/youtube" class="post-tag grid--cell" title="show questions tagged 'youtube'" rel="tag">youtube</a> <a href="../../questions/tagged/youtube-iframe-api" class="post-tag grid--cell" title="show questions tagged 'youtube-iframe-api'" rel="tag">youtube-iframe-api</a> </div> <div class="started mt0"> <div class="s-user-card s-user-card"> <time class="s-user-card--time" datetime="asked May 09 '17 at 10:31">asked May 09 '17 at 10:31</time> <a href="../../users/7225935/synj" class="s-avatar s-avatar__32 s-user-card--avatar"> <img class="s-avatar--image" src="../../users/profiles/7225935.webp" data-jdenticon-width="32" data-jdenticon-height="32" data-jdenticon-value="synj" /> </a> <div class="s-user-card--info"> <a href="../../users/7225935/synj" class="s-user-card--link">synj</a> <ul class="s-user-card--awards"> <li class="s-user-card--rep" title="reputation score">92</li> <li class="s-award-bling s-award-bling__silver" title="2 silver badges">2</li> <li class="s-award-bling s-award-bling__bronze" title="8 bronze badges">8</li> </ul> </div> </div> </div> </div> </div> </div> </div> <div class="s-pagination pager fr"> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=2" rel="prev" title="Go to page 2">Prev </a> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=1" rel="" title="Go to page 1">1</a> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=2" rel="" title="Go to page 2">2</a> <div class="s-pagination--item is-selected">3</div> <div class="s-pagination--item s-pagination--item__clear">…</div> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=54" rel="" title="Go to page 54">54</a> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=55" rel="" title="Go to page 55">55</a> <a class="s-pagination--item" href="../../questions/tagged/youtube-iframe-api_page=4" rel="next" title="Go to page 4"> Next</a> </div> </div> </div> </div> </div> <script src="../../static/js/stack-icons.js"></script> <script src="../../static/js/fromnow.js"></script> </body> </html>