CODEWITHSUNDEEP
javascripthtmlyoutube
Rich Hopkins
Rich Hopkins

Reputation: 1891

Embed YouTube with Video Selected from List

Ok - let me start by saying that I am NOT a web developer, and I've done very little with HTML and absolutely nothing with javascript, and my development activities have all been pretty minor, as it is not my job but a side interest. I have been tasked to take over my church's website, and one of the things that is being asked for is to embed video, and have a selector to choose which video to play. For example, when the page loads up, I would have it load up the most recent video, and show a list off to the side or down below that has other videos to choose from. Selecting one of those videos would play it in the same player, without going to YouTube.

I have tried a couple things, but I'm coming up pretty empty looking around the web for ideas, so this may not be possible, though I would be surprised if that were the case. Here is the latest thing I've tried, just to try to make the player load up a secondary video (I can figure out how to use variables in javascript later in order to handle multiple videos). To put it bluntly, the button doesn't seem to do a thing. I would appreciate any suggestions that anyone can give me.

<!doctype html>
<html lang="en">
	<head>
		<title>
			Sample FPC Oakwood
		</title>
	</head>

        <div id="ytplayer"></div>

        <script>
            // Load the IFrame Player API code asynchronously.
            var tag = document.createElement('script');
            tag.src = "https://www.youtube.com/player_api";
            var firstScriptTag = document.getElementsByTagName('script')[0];
            firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

            // Replace the 'ytplayer' element with an <iframe> and
            // YouTube player after the API code downloads.
            var player;
            function onYouTubePlayerAPIReady() {
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '640',
                    videoId: 'RYDpE0SgXOw'
                });
            }

            function onYouTubePlayerSelectOther() {
                player = new YT.Player('ytplayer', {
                    height: '390',
                    width: '640',
                    videoId: '1HsmP-Gk7c4'
                });
            }
        </script>
        <input id="submit" type="button" value="Sis Bernardini" onclick="onYouTubePlayerSelectOther();"/>
</body>
</html>

Thanks for your help.

Upvotes: 0

Views: 1481

Answers (1)

Zack Tanner
Zack Tanner

Reputation: 2590

What about something like this?

HTML:

<iframe id="youtube" width="560" height="315" src="https://www.youtube.com/embed/RYDpE0SgXOw" frameborder="0" allowfullscreen></iframe>
<button onclick="changeVideo('1HsmP-Gk7c4');">Change Video</button>

JS:

function changeVideo(videoId) {
    var ytString = "https://www.youtube.com/embed/" + videoId;
    document.getElementById('youtube').src = ytString;
}

Upvotes: 2

Related Questions