JSFiddle - React, Tailwind, and code Playground

by trewknowledge

HTML

<script src="http://www.youtube.com/player_api"></script>
<article>
    <div id="player">
        <a class="video-trigger" href="rrkrvAUbU9Y">Play</a>
        <img src="http://placehold.it/350x150" alt="" />
    </div>
        <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
</div>
</article>

<article>
    <div id="player">
      <img src="http://placehold.it/350x150" alt="" />
      <a class="video-trigger" href="u1zgFlCw8Aw">Play</a>
    </div>
    <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
    </div>
</article>


<article>
     <div id="player">
         <a class="video-trigger" href="rrkrvAUbU9Y">Play</a>
         <img src="http://placehold.it/350x150" alt="" />
    </div>
        <div class="content">
    <h3>Post Title Goes Here</h3>
    <p> Some article text goes here. Lorem Ipsum Dolor Set Amid...</p>
        </div>
</article>

CSS

article {
    border-bottom:1px solid #000; 
    height:200px;
    width:350px;
    margin:10px 0;
    padding: 10px 0;
    position:relative;
}

article .image {

}
.video-trigger {
    background:white;
    padding:5px;
    position:absolute;
    top:20px;
    right:20px;
}

article .content {

}

JavaScript

/* 2. This code loads the IFrame Player API code asynchronously.
      var tag = document.createElement('script');
      tag.src = "//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: '150',
        width: '350',
        videoId: 'u1zgFlCw8Aw',
        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();
}