Playing YouTube music
Posted: Mon Nov 13, 2017 8:09 am
I have been working on this idea for a while, now that it is completed I am sharing it with you, in case anyone needs it and will be happy to get your feedback. Have a look at the following URL: http://www.beleuramyhome.org.au/musicclips.html
This HTML page is the front end for the engine. It has a Layout grid in 3 parts, each has an IFrame in it
Each iFrame loads a Blog Object
Each Item in the blog points to an external URL and passes into it a parameter which is the YouTube Clip / VIDEO ID
The code for the engine itself is all in Javascript and using the YouTube API...
Enjoy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>music</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="MasterFrame.css" rel="stylesheet">
<link href="music.css" rel="stylesheet">
</head>
<body>
<div id="ytplayer"></div>
<script>
var YTautostart = '1';
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables.split('=');
if (sParameterName[0] == sParam)
{
//return sParameterName[1];
return decodeURIComponent(sParameterName[1]);
}
else
{ // default clip - Andre Rieu
YTautostart = '1';
return "7UFmwArST-I";
}
}
}
var YTclip = GetURLParameter('clip');
// 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: '80',
width: '400',
frameborder: '2',
playerVars: {autoplay:1, rel:0, fs:0},
videoId: YTclip
});
}
</script></body>
</html>
This HTML page is the front end for the engine. It has a Layout grid in 3 parts, each has an IFrame in it
Each iFrame loads a Blog Object
Each Item in the blog points to an external URL and passes into it a parameter which is the YouTube Clip / VIDEO ID
The code for the engine itself is all in Javascript and using the YouTube API...
Enjoy
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>music</title>
<meta name="generator" content="WYSIWYG Web Builder 12 - http://www.wysiwygwebbuilder.com">
<link href="MasterFrame.css" rel="stylesheet">
<link href="music.css" rel="stylesheet">
</head>
<body>
<div id="ytplayer"></div>
<script>
var YTautostart = '1';
function GetURLParameter(sParam)
{
var sPageURL = window.location.search.substring(1);
var sURLVariables = sPageURL.split('&');
for (var i = 0; i < sURLVariables.length; i++)
{
var sParameterName = sURLVariables.split('=');
if (sParameterName[0] == sParam)
{
//return sParameterName[1];
return decodeURIComponent(sParameterName[1]);
}
else
{ // default clip - Andre Rieu
YTautostart = '1';
return "7UFmwArST-I";
}
}
}
var YTclip = GetURLParameter('clip');
// 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: '80',
width: '400',
frameborder: '2',
playerVars: {autoplay:1, rel:0, fs:0},
videoId: YTclip
});
}
</script></body>
</html>
