Custom playlist example
This is an example of a Player v1 - custom video playlist.
You can check an online demo here: Demo
HTML
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Playlist example</title>
<meta name="description" content="This is an example of a custom video playlist">
<meta name="author" content="Genoa Team">
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<div class="vid-main-wrapper clearfix">
<!-- THE GENOA PLAYER -->
<div class="vid-container">
<iframe id="vid_frame" src="https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628775" frameborder="0"
width="650" height="315"></iframe>
</div>
<!-- THE PLAYLIST -->
<div class="vid-list-container">
<ol id="vid-list">
<li class="selected">
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628775'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-gJc83Cguk-JS3W731535334674_240P.jpg" />
</span>
<div class="desc">El lugar donde podría ser detenida Cristina Kirchner</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628741'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-_Gs5VJ@@ki-JL10RH1535329567.jpg?341752" />
</span>
<div class="desc">Federico Mancinelli no pudo concretar de cabeza el primero de Huracán</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628730'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-PFqnpIxHJ-MTKGHT1535327786.jpg?401610" />
</span>
<div class="desc">Esteban Andrada y una extraña salida</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628728'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-_49as5Bhk-V3MFVN1535327655.jpg?178971" />
</span>
<div class="desc">Agustín Almendra tuvo la más clara para Boca</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628682'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-6cji7wc9n-QKJFP51535318590_240P.jpg" />
</span>
<div class="desc">Justin Gaethje destruyó a James Vick con un derechazo brutal. (Fox Sports)</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628617'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-l0dokA0tn-092B5U1535307462.jpg?520799" />
</span>
<div class="desc">Rescatan otra orca en Mar del Plata</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://api.vodgc.net/player/v2/embed/playerId/PQYJ7P1510330862/contentId/628657'">
<span class="vid-thumb">
<img width=72 src="https://thumbs.vodgc.net/3-245-API-Ubc9Y@@2tx-0FUOIX1535315292.jpg?952392" />
</span>
<div class="desc">Provocó a un bisonte en la ruta y lo condenaron a 130 días de cárcel</div>
</a>
</li>
</ol>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="script.js"></script>
</body>
</html>CSS
styles.css
body {
margin: 30px;
padding: 0;
background: #ddd;
font-family: Arial, Helvetica, sans-serif;
}
.title {
width: 100%;
max-width: 854px;
margin: 0 auto;
}
.caption {
width: 100%;
max-width: 854px;
margin: 0 auto;
padding: 20px 0;
}
.vid-main-wrapper {
width: 100%;
max-width: 1100px;
min-width: 440px;
background: #fff;
margin: 0 auto;
}
/* VIDEO PLAYER CONTAINER
############################### */
.vid-container {
position: relative;
padding-bottom: 52%;
padding-top: 30px;
height: 0;
width: 70%;
float: left;
}
.vid-container iframe,
.vid-container object,
.vid-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
min-height: 360px;
}
/* VIDEOS PLAYLIST
############################### */
.vid-list-container {
width: 30%;
height: 360px;
overflow: hidden;
float: right;
}
.vid-list-container:hover,
.vid-list-container:focus {
overflow-y: auto;
}
ol#vid-list {
margin: 0;
padding: 0;
background: #222;
}
ol#vid-list li {
list-style: none;
}
ol#vid-list li a {
text-decoration: none;
background-color: #222;
height: 55px;
display: block;
padding: 10px;
}
ol#vid-list li a:hover,
ol#vid-list li.selected a {
background-color: #666666
}
.vid-thumb {
float: left;
margin-right: 8px;
}
.active-vid {
background: #3A3A3A;
}
#vid-list .desc {
color: #CACACA;
font-size: 13px;
margin-top: 5px;
}
@media (max-width: 624px) {
body {
margin: 15px;
}
.caption {
margin-top: 40px;
}
.vid-list-container {
padding-bottom: 20px;
}
}JavaScript
script.js
/*JS FOR SCROLLING THE ROW OF THUMBNAILS*/
$(document).ready(function () {
$('.vid-item').each(function (index) {
$(this).on('click', function () {
var current_index = index + 1;
$('.vid-list li').removeClass('active');
$('.vid-list li:nth-child(' + current_index + ') .thumb').addClass('active');
});
});
var $list = $('#vid-list li');
$list.click(function () {
$list.removeClass('selected');
$(this).addClass('selected');
});
});
No Comments