Graduate Assignment 3

Creating functions, nodes, and event listener

by Larry Adams

HTML

<h1>Graduate Assignment 3</h1>
<p>Creating a DOM, parent and child nodes for youTube Videos</p>

<div>
    <button id="start">Start Playing Video</button> <button id="stop">Stop Playing Video</button>
</div>
<br>
<div>
    
    <div id="player1"></div>
</div>

JavaScript

// Graduate Assignment 3 week 8 & 9
// Student Larry Adams

// Code is provided by YouTube Development: https://developers.google.com/youtube/iframe_api_reference
// I modified the code as a lesson to teach how to read and modifiy code.

// Please use jQuery 1.9 on higher

// Creates a YouTube inframe with multiple videos.  Your task is to add a second child video and a EventListerner for the Start button

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// Adds the parameters for the John Denver Vidoe and Parent Node
var playerInfoList = [{
    id: 'player1',
    height: '390',
    width: '640',
    videoId: 'wP7Chi9MPSg'
}

// Add a child node for a second video
/*
,var playerInfoList = [{
    id: 'player2',
    height: '390',
    width: '640',
    videoId: 'C21G2OkHEYo'
}
*/
                      
];

// Creates an iframe API for YouTube Video
function onYouTubeIframeAPIReady() {
    if (typeof playerInfoList === 'undefined') return;
    
    for (var i = 0; i < playerInfoList.length; i++) {
        var curplayer = createPlayer(playerInfoList[i]);
        players[i] = curplayer;
    }
}

var players = new Array();

// Create a Youtube Video Player
function createPlayer(playerInfo) {
    return new YT.Player(playerInfo.id, {
        height: playerInfo.height,
        width: playerInfo.width,
        videoId: playerInfo.videoId,
    });
}

// Stop Playing Video is been provided.  You are to add an function and onclick event that will start and stop the video.

// Modifiy this code to an event listener
$(document).ready(function () {
    $('#stop').click(function () {
        //loop players array to stop them all
        $(players).each(function (i) {
            console.log(this);
            this.stopVideo();
        });
    });
}); 


/*
 * solution
 intergrate function on a Event Listener...