Minimal YouTube Player API Implementation

A minimal way of loading the YouTube API with jQuery.

HTML

<main>
    <button class="play"> <span>Play Video</span> </button>
    <button class="pause"> <span>Pause Video</span> </button>
    <button class="stop"> <span>Stop Video</span> </button>
</main>

<hr>

<li>
    <section class="active"> <!-- Whichever section has the class of '.active' is selected to be the player by the 'onYouTubeIframeAPIReady()' function -->
	
        <iframe id="youtube-video" src="https://www.youtube.com/embed/y1yFiotx3qk?rel=0&modestbranding=1&showinfo=0&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
		
    </section>
</li>

<hr>

<li>
    <section>
        <iframe id="youtube-video" src="https://www.youtube.com/embed/9ZfN87gSjvI?rel=0&modestbranding=1&showinfo=0&enablejsapi=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
    </section>
</li>

<hr>


<!-- YouTube API should come before all other scripts in the <body> -->
<script src="https://www.youtube.com/iframe_api"></script>

CSS

h1 {
    text-align: center;
    font-family: sans-serif;
}

hr {
    max-width: 500px;
}

li {
    margin: 0 auto;
    width: 100%;
    max-width: 500px;
    list-style: none;
    /*    border: 1px solid blue;*/
}

section {
    position: relative;
    padding-bottom: calc(56.25% - 4px);
    /*16:9 minus '.active'  border*/
    height: 0;
    /*    border: 1px solid red;*/
}

.active {
    box-sizing: border-box;
    border: 5px solid red;
    /* Outlines the video currently affected by the player controls */
}

iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /*    border: 1px solid green;*/
}

main {
    display: flex;
    margin: 0 auto;
    justify-content: center;
    max-width: 600px;
    /*    border: 1px solid red;*/
}

button {
    display: flex;
    margin: 0;
    padding: 0;
    width: calc(100%/3);
    height: 50px;
    background-color: rgb(200, 200, 200);
    cursor: pointer;
}

button:focus {
    outline: none;
}

span {
    margin: 0 auto;
    font-size: 1.5em;
    /*    border: 1px solid blue;*/
}

JavaScript

$(document).ready(function() {

    // Defines global player variable
    var player;

    function onYouTubeIframeAPIReady() {

        // Delays defining the player by 100ms (seemed to cause occasional bugs in Chrome if loaded immediately)
        setTimeout(function() {

            // Confirming the API has been loaded (not needed)
            $('body').prepend('<h1>YouTube Player API</h1><hr>');
            console.log('API Loaded!');

            // Selects the iframe that has an id of 'youtube-video' contained within  a section that has a class of 'active'
            var $selectedVideo = $('.active #youtube-video')[0];

            // Uses the previous variable to define the youtube player
            player = new YT.Player($selectedVideo);

        }, 100);

    }

    // Calls the Function
    onYouTubeIframeAPIReady();


    // Video Controller Buttons
    $('.play').on('click', function() {
        player.playVideo();
    });
    $('.pause').on('click', function() {
        player.pauseVideo();
    });
    $('.stop').on('click', function() {
        player.stopVideo();
    });

});