JS YouTube API Chromeless Player

Question

How would i embed a chromeless YouTube Player into my webpage, The YouTube api Documents only give Javascript functions, do you embed with iframe or use a video tag and also how do you control the chromeless player.

Answer 1

You'd call the javascript function as per the documentation,

https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player

but add arguments to it. Basically, you create a div on your page with a particular ID

<div id=myplayer></div>

then call the youtube player javascript

<script>
 var tag = document.createElement('script');
 tag.src = "https://www.youtube.com/iframe_api";
 var firstScriptTag = document.getElementsByTagName('script')[0];
 firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 var player;
 function onYouTubeIframeAPIReady() {
 player = new YT.Player('myplayer', {
 height: '390',
 width: '640',
 videoId: 'M7lc1UVf-VE'
 }
 });
 }

but with specific arguments from the list here: https://developers.google.com/youtube/player_parameters

so we'd add those playerVars into the function, replacing the function above with this:

 function onYouTubeIframeAPIReady() {
 player = new YT.Player('myplayer', {
 height: '390',
 width: '640',
 videoId: 'M7lc1UVf-VE',
 playerVars: { 'controls': 0, 'showinfo': 0 }
 });
 }

Then, you'd use javascript to stop/pause/start the video

player.playVideo()
player.pauseVideo()
player.stopVideo()

The most basic approach would be to make these onclick events for links, eg

<a href='#' onclick='javascript:player.playVideo(); return true;'>Play</a> 

etc.

• user3343456: thanks, and by the way, who put this down, its a valid programming question