youtube-iframe-api

YouTube IFrame API on Internet Explorer and Firefox

拈花ヽ惹草 提交于 2019-12-03 08:27:56
问题 More of an "answer" than a "question", but not having found this elsewhere I'm posting it here. I was having difficulty initializing the iFrame API in all versions of IE and Firefox, with a somewhat custom implementation. Basically, it would load the API, but wouldn't create the player object. After a bit of trial and error, I finally figured out it wasn't working because the div ID I was passing to the object had its CSS visibility set to 'none' . Once it was set to 'visible' the whole thing

YouTube IFrame API on Internet Explorer and Firefox

偶尔善良 提交于 2019-12-02 22:14:56
More of an "answer" than a "question", but not having found this elsewhere I'm posting it here. I was having difficulty initializing the iFrame API in all versions of IE and Firefox, with a somewhat custom implementation. Basically, it would load the API, but wouldn't create the player object. After a bit of trial and error, I finally figured out it wasn't working because the div ID I was passing to the object had its CSS visibility set to 'none' . Once it was set to 'visible' the whole thing worked. After that I tried setting the div CSS to 'display:none' (the app required the video to be

Pass youtube iframe api events onstatechange when src changes

核能气质少年 提交于 2019-12-02 15:01:26
问题 So I figured I would update this with a working example. I have ditched stating the iframe tag and just used the iframe api to create an iframe and then loaded the player by id with a data attribute. Here is a working example below. So now all statechanges are passed consistently through the youtube player. So the script will load an iframe into the Div #player and you can just loadVideoByID pretty easily with jquery and javascript. <div id="player"></div> <script> var tag = document

Pass youtube iframe api events onstatechange when src changes

我的梦境 提交于 2019-12-02 11:06:17
So I figured I would update this with a working example. I have ditched stating the iframe tag and just used the iframe api to create an iframe and then loaded the player by id with a data attribute. Here is a working example below. So now all statechanges are passed consistently through the youtube player. So the script will load an iframe into the Div #player and you can just loadVideoByID pretty easily with jquery and javascript. <div id="player"></div> <script> var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document

Youtube Closed Caption for HTML5 Not Working

给你一囗甜甜゛ 提交于 2019-12-02 10:38:40
I am having issues displaying closed caption on youtube videos using the iframe player. Here's the code I am using: <!DOCTYPE html> <html> <body> <!-- 1. The <iframe> (and video player) will replace this <div> tag. --> <div id="player"></div> <script> // 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement('script'); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName('script')[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); // 3. This function creates an <iframe> (and YouTube player) //

Can't autoplay youtube video in android chrome

倖福魔咒の 提交于 2019-12-02 02:18:19
I am using IFrame Player API to play youtube videos in my website.when user clicks a particular link it popups a lightbox and plays video automatically.In Desktop it works fine,and in ios I understand why doesn't it work (they already mentioned why), but for android chrome its not working.Is autoplay was disabled also in andorid browsers? Please enlighten me. etf213 This link seems to answer most of your questions: YouTube iframe embeds cannot autoplay on Android But in short, it seems like autoplay has been disabled on Chrome for Android so you need to treat it in the same way as iOS and use

Hiding YouTube embed title and 'More videos' (Updated)

寵の児 提交于 2019-11-30 16:32:42
问题 Is there an official way to hide the title and the More videos section from a YouTube embed ( latest version as of July 2nd 2018 ), and just show the YouTube logo bottom-right? I know the embed used to have this ability some time ago. What I'm basically looking for is have the embed auto play with no other elements on it except the mandatory YouTube logo and be able to pause it, but no More videos appear when doing that. For the showinfo option, the documentation currently says: Setting the

onYouTubeIframeAPIReady not firing on angular2 web app

大兔子大兔子 提交于 2019-11-30 09:21:29
问题 I'm building a web application using angular 2, typescript and YouTube API to add a player to the page after the user login. So once logged in, the app loads the following component: export class MyComponent implements OnInit { myService: MyService; constructor( private _myService: MyService ) { this.myService = _myService; } ngOnInit() { this._myService.loadAPI(); } } The component html contains the following tag: <iframe id="player" type="text/html" width="640" height="360" src="http://www

onYouTubeIframeAPIReady not firing on angular2 web app

徘徊边缘 提交于 2019-11-29 15:25:02
I'm building a web application using angular 2, typescript and YouTube API to add a player to the page after the user login. So once logged in, the app loads the following component: export class MyComponent implements OnInit { myService: MyService; constructor( private _myService: MyService ) { this.myService = _myService; } ngOnInit() { this._myService.loadAPI(); } } The component html contains the following tag: <iframe id="player" type="text/html" width="640" height="360" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1" frameborder="0" allowfullscreen></iframe> And finally, the

Youtube iFrame API setPlaybackQuality ignored on mobile device

|▌冷眼眸甩不掉的悲伤 提交于 2019-11-29 01:29:11
I'm trying to setup YouTube iframe API to play a FullHD video with a lower quality. My goal is to save bandwidth on mobile devices and reduce loading time. My HTML structure is the classical player div, plus a debug div for messages. HTML <div id="debug"></div> <div id="your_video_id"> <div id="player"></div> </div> I've tried to invoke setPlaybackQuality as soon as the player is ready, to avoid mobile users wasting time in buffering (as suggested in this post ). I've also invoked it in both "BUFFERING" and "PLAYING" states. When quality changes, debug content is updated with actual playback