Examples
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');
});
});
External playlist example
How to
If you want to use an external playlist you have to add the external_playslist parameter to your embed URL and its value has to be content ids separated by commas.
Optional
From player configuration, at "Relation" tab you can configure an autoplay behavior checking the "Autoplay Relation" checkbox and also you can specify the delay.
Example
Player with playlist layout
Example
Custom styles
You can configure your player in the "Look and feel" section and add custom styles like the following example:
@media (max-width: 720px) {
.vid-list-container {
visibility: hidden;
}
#media-player-container-with-playlist {
width: 100%;
}
}