YouTube Developers Live: Embedded Web Player Customization

Google for Developers · 1.7M views · 2013 · 22:24

Open on YouTube

Web developmentSoftware (other)tutorialdated

Why Stack Overflow recommends it

Stack Overflow users link it when answering or asking how to customize or script an embedded YouTube iframe player, such as changing the progress bar color, enabling the JS API, or controlling playback.

Recommended by 1 people across 1 different months, 2013 to 2021.

What it is

A 2013 episode of YouTube Developers Live in which Jeff Posnick walks through the player parameters available for the iframe-embedded YouTube player, focusing on those relevant to desktop browsers. It covers options such as autoplay, controls, color, loop, start/end, enablejsapi, origin and the deprecated parameters, with chapter markers for each.

What people said

Recommends backnext · 2017-11 · Stack Overflow · on “Handling Captions via the YouTube Player API”

Did you look at this tutorial? [this video] and this is a little code to change borders... Is this what you want? <iframe id="video" width="640" height="360" src=" [this video] " frameborder="0" style="border: solid 50px #37474F"></iframe> and a script: var tag2 = document.createElement('script'); tag2.id = 'iframe-demo'; tag2.src = ' [LINK] '; var firstScriptTag2 = document.getElementsByTagName('script')[0]; firstScriptTag2.parentNode.insertBefore(tag2, firstScriptTag2); var player; function onYouTubeIframeAPIReady() { player = new YT.Player('video', { events: { 'onReady': onPlayerReady, 'onStateChange': onPlayerStateChange } }); } function onPlayerReady(event) { document.getElementById('video').styl

Cites MichalB · 2013-05 · Stack Overflow · on “Changing SRC attribute of IFRAME on load does not work”

Still does not work, my iframe tag is defined like this: so I have applied document.getElementsByTagName("iframe")[4].src = "new_link" but it does not work.

Cites Astro · 2015-01 · Stack Overflow · on “Youtube embeded - play/pause playback”

Short question : Can I use javascript to play/pause this video? (using youtube site and not embedded it) : [this video]

Cites aug · 2015-03 · Stack Overflow · on “html change color on youtube video”

EDIT: This answer is deprecated since YouTube has changed how their player works. I'll try to update this answer when I can. You can change it by specifying color when you embed a Youtube video as mentioned in their documentation here [LINK] . color (supported players: AS3, HTML5) This parameter specifies the color that will be used in the player's video progress bar to highlight the amount of the video that the viewer has already seen. Valid parameter values are red and white , and, by default, the player will use the color red in the video progress bar. Unfortunately it seems AS3 and JavaScript are deprecated now so you will have to use the Youtube Iframe embed API. They have documentation

Cites Bryce77 · 2015-05 · Stack Overflow · on “YouTube JS API: play by random time point on button click”

Thanks mplungjan...I need to make a POC for that but I was trying with this code: to add multiple time point..

Cites Oliver Kucharzewski · 2015-08 · Stack Overflow · on “Is it possible to implement a youtube video without the embed url?”

I know it is generally essential essential to implement an /embed/ URL to place a video on the page i.e. : <iframe id="ytplayer" type="text/html" width="640" height="390" src=" [this video] " frameborder="0"/> My question today is, is it possible to implement it without the /embed/ ? i.e. [this video] The reasoning for this is within the system I have developed an individual accidentally used the whole youtube links rather than embed, I was thinking about making a parsing script with PHP but I'm sure theres an easier way.

Cites Mboe5000 · 2017-01 · Stack Overflow · on “How to change speed on embedded YouTube video”

I tried code from [LINK] But the Youtube player API only works for desktops. Additionaly I tried to get the video player from the Youtube iframe and to change the speed via the player properties. This was not possible due to cross-site-scripting: ' var frame = document.getElementById("myf"); var fdoc = frame.contentDocument; fdoc.getElementsByTagName("video")[0].playbackRate = 2; '

Cites Aashish Shrestha · 2021-03 · Stack Overflow · on “Add extra query string to src attribute's value of an iframe element that has been generated or outputted by wp_oembed_get() function”

I want to add an extra query string to the src attribute's value of the iframe element. I want to achieve this by using PHP or WordPress and not by JavaScript. The thing is that I want to use Youtube iFrame API, which is only possible if the iframe has a query string in which enablejspai=1 src=" [this video] " Currently, the user will copy-paste the video URL and my code will grab that URL and will convert it to the iframe element. $embed_code = wp_oembed_get( $video_post_url); echo $embed_code; The above code will output an iframe element with src attribute with value of just plain url but I want to add a query string to it and make it plain-url?enablejsapi=1 So I can use Youtube Iframe API.