Using the YouTube Iframe API with Ionic

ionic-v1
1

I’ve set up the code almost exactly as they have in their setup guide: https://developers.google.com/youtube/iframe_api_reference?hl=en

However, I’m being greeted with a blank page. I’m using Ionic and Angular to run my project and it has occurred to me that I haven’t seen anyone using the IFrame API with Ionic yet. Is this an Ionic specific issue or is there something obvious with the code that I’m not seeing?

<!-- 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)
  //    after the API code downloads.
  var player;

  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      height: '390',
      width: '640',
      videoId: 'M7lc1UVf-VE',
      events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
      }
    });
  }

  // 4. The API will call this function when the video player is ready.
  function onPlayerReady(event) {
    event.target.playVideo();
  }

  // 5. The API calls this function when the player's state changes.
  //    The function indicates that when playing a video (state=1),
  //    the player should play for six seconds and then stop.
  var done = false;

  function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING && !done) {
      setTimeout(stopVideo, 6000);
      done = true;
    }
  }

  function stopVideo() {
    player.stopVideo();
  }
</script>
2

refer this working link

Ionic Embedded Youtube Player - Autostart

1 Like
3

I am facing a similar situation in trying to use the iframe API. bsandesh’s example does show a basic implementation, but not a very realistic example for a production app.
What would be nice is to be able to click a button and launch a fullscreen player with a url that I pass.

<img ng-click="projects.playYoutube(project.video_uri)" class="play-button" src="img/play-button.png" alt=""/>

and then using the API launch the player via JS inside my controller or convert to a directive.
I’ll keep working on it, but if anyone else manages to find a solution first please post here and I’ll do the same!

Thanks!

4

Forgot to mention, as of now my working solution is simply to launch an in app browser loaded with the embedded youtube page. From there the user can click to watch the video without leaving the app. Not my favorite, but it works I guess.

For reference, here’s what I’m doing in the controller.
function playYoutube (source) { //console.log(cordova); if (vm.isWebView) { cordova.InAppBrowser.open(source, '_blank', 'location=no'); } else { window.open(source, '_blank', 'location=yes'); } }