JSFiddle - React, Tailwind, and code Playground

by jmmorin

HTML

<div id="player"></div>
<div>
<table>
<tr>
<td style="vertical-align: top;"><button id="btnSeek" data-seek="00:07">00:07</button></td>
<td>Will Miller: So what I'm gonna talk about is, after some brief background on the Wallace Foundation, explain some of the reasons why we came to audience building as a focus for our initiatives in the arts. And then spend the bulk of my time on the lessons from The Road to Results, as Laura mentioned. And then, a little bit about how market research can look costly when viewed only as an expense, but looks a little different when you think of it as an investment. It has a return on it if it's used effectively and connected to action. And then, I wanna try to leave some time for your questions.</td>
</tr>
<tr>
<td style="vertical-align: top;"><button id="btnSeek" data-seek="00:46">00:46</button></td>
<td>So the mission of the Wallace Foundation reflects the interest of the folks who made the money. DeWitt Wallace and Lila Acheson Wallace, they had many philanthropic interests, but, in accord to DeWitt Wallace's interest was youth development, and to Lila was the arts. So our foundation today has a mission of improving learning and enrichment for the least advantaged children in the United States and the vitality of the arts for everyone. In the arts area, we came to building audiences by focusing on the audience of arts organizations. We did a market research study in 2014, of 400 arts organization leaders, and they identified out of a list of 27 possibilities their top ten challenges. And it struck us that these grouped naturally into a couple of topic or themes. The biggest ones were fundraising and building audiences.</td>
</tr>
<tr>
<td style="vertical-align: top;"><button id="btnSeek" data-seek="1:46">01:46</button></td>
<td>That doesn't surprise anyone 'cause they're connected to two revenues, right? Earned and contributed revenues, and they're closely intertwined. Of course, as we're all aware, participation rates in the...

JavaScript

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: 'KKzWGt-kVtc',
          events: {
            'onReady': onPlayerReady,
            
          }
        });
      }

      // 4. The API will call this function when the video player is ready.
      function onPlayerReady(event) { 
     //Empty for now
  }

 
jQuery(function() {
    
    jQuery(document).on('click', '#btnSeek', function() {
      var seektarget = jQuery(this).data('seek')  
       var a = seektarget.split(':'); // split it at the colons
       var seconds = (+a[0]) * 60 + (+a[1]); 
        player.seekTo(seconds, true);
    });
});