As noted in the previous post, ASP files comprise conventional HTML combined with server side Javascript code.
The JavaScript functions can be in separate included files. This allows the code to be easily reused.
The calls to the functions can then be made within the main file as required:
<% videolist="I68GG96bSYQ:Christmas lights,I68GG96bSYQ:More Chrismas,I68GG96bSYQ:Not Christmas";
Response.Write(makebuttons(videolist));
Response.Write(makeplaylist(videolist));
Server Side Functions
Create a file called makebuttons.asp.There are three functions.
The first one assembles a button similar to that in the previous post.
The second takes a list of Youtube video IDs and their titles and assembles a button for each of the pairs.
The third function assembles the same list into YouTube playlists.
<%
function makebutton(index,buttonsource,playsource,buttonID,videotitle){
result="";
result=result +"<div class='videobuttoncontainer'>";
result=result +"<img src='" +buttonsource+"' alt='Title' class='image' width='100%' onclick='setPlayList("+index.toString()+")' />";
result=result +"<div class='videobuttonoverlay'>";
result=result +"<img class='videobuttonicon' src='"+playsource+"' id='"+buttonID+"' onclick='setPlayList("+index.toString()+")' alt='"+videotitle+"' title='Play video: "+videotitle+"' oncontextmenu='copytoClipboard("+index.toString()+")' />";
result=result +"</div>";
result=result +"<span id='buttontext' class='buttontext'>"+videotitle+"</span>";
result=result +"</div>";
return result;
}
function makebuttons(videolist){
result="";
videos=videolist.split(",");
for(ix =0;ix<videos.length;ix++){
videoitem=videos[ix].split(":");
result=result+makebutton(ix,"assets/button.png","assets/play.png", videoitem[0],videoitem[1]);
}
return result;
}
function makeplaylist(videolist){
result="";
videos=videolist.split(",");
videoitem=videos[0].split(":");
result=result+"'" + videoitem[0]+"?playlist=";
for(ix =1;ix<videos.length;ix++){
videoitem2=videos[ix].split(":");
result=result+','+videoitem2[0]
}
result=result+"'";
for(ix =1;ix<videos.length;ix++){
videoitem=videos[ix].split(":");
result=result+",'" + videoitem[0]+"?playlist=";
for(iy =ix;iy<videos.length;iy++){
videoitem2=videos[iy].split(":");
result=result+','+videoitem2[0]
}
for(iy =0;iy<ix;iy++){
videoitem2=videos[iy].split(":");
result=result+','+videoitem2[0]
}
result=result+"'";
}
result="<script>playlists=["+result+"]</script>";
return result;
}
%>
New Client Side functions
There are two pieces of code that will be used client side. The first is effectively the same as that used in the client side example. The second piece sets up a capability to copy the path to the video within the page to the clipboard.<script>
function setPlayList(aPlaylist){
//alert(playlists[aPlaylist]);
youtubePlayer = document.getElementById("youtube_video");
youtubePlayer.src="https://www.youtube.com/embed/"+playlists[aPlaylist] + "&rel=0&autoplay=1";
}
function copytoClipboard(videonum){
result=window.location.href;
hashbit="";
querybit="";
newquery="";
starthash = result.indexOf("#");
startquery=result.indexOf("?");
if(starthash>0){
hashbit=result.slice(starthash);
result=result.substring(0,starthash)
}
else{
hashbit="#demo";
}
if(startquery>0){
querybit=result.slice(startquery).slice(1);
querybits=querybit.split("&");
result=result.substring(0,startquery)
foundVideo=false;
for(ix=0;ix<querybits.length;ix++){
endname=querybits[ix].indexOf("=");
if(querybits[ix].substring(0,endname)=="video"){
newquery=newquery+"video="+videonum.toString() +"&";
foundVideo=true;
}
else{
newquery=newquery+querybits[ix] +"&";
}
}
if (!foundVideo){
newquery=newquery+"video="+videonum.toString() +"&";
}
if(newquery.length>0){
newquery=newquery.slice(0,newquery.length-1);
}
result=result+"?"+newquery;
}
else{
result=result+"?video="+videonum.toString();
}
result=result+hashbit;
var copything=document.getElementById("copything")
copything.value=result;
copything.select();
copything.setSelectionRange(0, 99999);
}
</script>
The Main ASP file
The main ASP file is modified from the original:<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.videoDisplay {
float: left;
width: 85%;
}
.videoList {
float: left;
width: 15%;
opacity:1;
}
.videobuttoncontainer {
position: relative;
width: 100%;
max-width: 400px;
}
.videobuttonoverlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0.25;
transition: .3s ease;
}
.videobuttoncontainer:hover .videobuttonoverlay:hover {
background-color: red;
opacity: 0.8;
color: white;
}
.videobuttonicon {
color: white;
font-size: 100px;
position: absolute;
top: 30%;
left: 40%;
width:25%;
height:auto;
text-align: center;
}
.buttontext{
opacity:1.0;
position:absolute;
bottom:4px;
left: 4px;
font-size: small;
color:white;
}
.buttontext:hover{
color:white;
}
</style>
<!-- #include file="makebuttons.asp" -->
<!-- #include file="makebuttons_clientside.asp"-->
</head>
<body>
<table width="100%">
<tr>
<th border="1" width="5%"></th>
<th border="1">
Test stuff
</th>
<th width="5%">
</th>
</tr>
<tr>
<td>Ignore this</td>
<td border="1">
<div class="row">
<div class="videoList">
<% videolist="I68GG96bSYQ:Christmas lights,I68GG96bSYQ:More Chrismas,I68GG96bSYQ:Not Christmas";
Response.Write(makebuttons(videolist));
Response.Write(makeplaylist(videolist));
%>
<input type="text" value="Hello" id="copything">
</div>
</div>
<div class="videoDisplay">
<div class="videoWrapper">
<iframe id="youtube_video"
src="https://www.youtube.com/embed/I68GG96bSYQ"
frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen>
</iframe>
</div>
</div>
</div>
</td>
<td>Ignore this</td>
</tr>
</table>
</body>
</html>
When browsed to, the result is as follows:
