title: Is there a way to add a YouTube API player to leaflet control window?
body: <p>I'm making a leaflet map that contains a geoJSON layer. When a point on the geoJSON layer is clicked, the YouTube video identified in that point (by a "youtube_id" field) opens in a leaflet control window. I would really like to be able to get the playback time of the video, and it seems like the only way to do this is with the <a href="https://developers.google.com/youtube/iframe_api_reference" rel="nofollow noreferrer">YouTube iframe API</a>, using their <a href="https://developers.google.com/youtube/iframe_api_reference#Playback_status" rel="nofollow noreferrer">playback status functions</a>.</p>
  
  <p>The way I have the map working now is to add an iframe object to the leaflet control window, similar to how <a href="http://leafletjs.com/examples/choropleth/" rel="nofollow noreferrer">this tutorial</a> works. This works to display the video, but there's no way to get the playback time as the video is playing. Here's the relevant part of my javascript:  </p>
  
  <pre><code>var geoj = GeoJSON.parse(dat, {Point: ['lat', 'lon']});
  
  var style = {
      radius: 2,
      fillColor: "darkred",
      color: "darkred",
  };
  
  var YT_id;
  
  var vidPlayer = L.control({position: 'bottomleft'});
  vidPlayer.onAdd = function(mymap) {
      this._div = L.DomUtil.create('div', 'vidPlayer');
      this.update();
      return this._div;
  };
  
  vidPlayer.update = function (vidPopup) {
      this._div.innerHTML = '&lt;h4&gt;USGS CMG Video&lt;/h4&gt;' + (vidPopup ? '&lt;b&gt;' + vidPopup + '&lt;/b&gt;&lt;br /&gt;' : 'Select a video');
  };
  vidPlayer.addTo(mymap);
  
  var vidPopup;
  function onEachFeature(feature, layer) {
      layer.on('click', function(e) {
          YT_id = feature.properties.youtube_id;
          vidSec = feature.properties.video_second;
          vidPopup = "&lt;iframe id=\"player1\" src=https://www.youtube.com/embed/" + YT_id + "?start=" + vidSec + "&amp;autoplay=1" + " width=\"600\" height=\"450\" frameborder=\"0\"&gt;&lt;/iframe&gt;";
          vidPlayer.update(vidPopup);
          lat = feature.geometry.coordinates[1];
          lng = feature.geometry.coordinates[0];
          var marker;
          mymap.on('click', function (e) {
              if (marker) {
                  mymap.removeLayer(marker);
              }
              marker = new L.Marker([lat,lng]).addTo(mymap);
          });
          return YT_id;
          console.log(vidSec);
      });
  }
  
  var polyline = L.geoJSON(geoj, {
      onEachFeature: onEachFeature,
      pointToLayer: function (feature, latlng) {
          return L.circleMarker(latlng, style);
      onEachFeature: onEachFeature;
      }
  }).addTo(mymap);
  
  mymap.fitBounds(polyline.getBounds());
  
  L.control.scale({position: 'bottomright'}).addTo(mymap);
  </code></pre>
  
  <p></p>
  
  <p>I thought I would be able to easily do this by changing <code>vidPopup</code> in the <code>onEachFeature</code> function to:  </p>
  
  <pre><code>vidPopup = new YT.Player('player', {
      height: '400',
      width: '534',
      videoID: YT_id,
  });  
  </code></pre>
  
  <p>(as shown in the YouTube iframe API, kind of), but then nothing happens when I click on the geoJSON points. In my browser's inspector, I can see that the <code>YT_id</code> variable is getting populated, but <code>vidPopup</code> gets returned as:<br>
  <code>X {b: Jb, a: null, h: null, closure_uid_691267473: 1, g: 1…}</code> and it looks like the variables aren't getting passed to it.  </p>
  
  <p><strong>Does anyone know how I can either get a video's playback time in an iframe object, or how to add a proper YouTube iframe API to a leaflet control window?</strong> I want to keep the control window rather than a separate html side panel so the map can be seen when no video is playing -- that seemed like the easiest way.</p>