CODEWITHSUNDEEP
javascripthtmlflashyoutube-api
user3343456
user3343456

Reputation: 103

JS YouTube API Chromeless Player

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.

Upvotes: 2

Views: 1781

Answers (1)

Will
Will

Reputation: 872

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.

Upvotes: 7

Related Questions