Skip to content

Instantly share code, notes, and snippets.

@pemby

pemby/index.html

Created February 25, 2020 22:32
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save pemby/638027ef05115afc8ae71fdb0d739c9a to your computer and use it in GitHub Desktop.
Save pemby/638027ef05115afc8ae71fdb0d739c9a to your computer and use it in GitHub Desktop.
Download ZIP
// source https://jsbin.com
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
<style id="jsbin-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 {
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;
}
}
</style>
</head>
<body>
<div class="vid-main-wrapper clearfix">
<!-- THE YOUTUBE PLAYER -->
<div class="vid-container">
<iframe id="vid_frame" src="C:\Users\Admin\Desktop\youtube-vertical-playlist-responsive\src\videos\Wyatt.video.mp4" frameborder="0" width="560" height="315"></iframe>
</div>
<!-- THE PLAYLIST -->
<div class="vid-list-container">
<ol id="vid-list">
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/cOSEOYi9JS4?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/cOSEOYi9JS4/default.jpg" /></span>
<div class="desc">WeatherBeater™ Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/9P7mEf4bilg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/9P7mEf4bilg/default.jpg" /></span>
<div class="desc">X-act Contour® Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/KHxNpXovl58?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/KHxNpXovl58/default.jpg" /></span>
<div class="desc">GearBox® Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/D_a2UBGsePQ?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/D_a2UBGsePQ/default.jpg" /></span>
<div class="desc">Mud Guards Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/vYoh2IgoBXg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/vYoh2IgoBXg/default.jpg" /></span>
<div class="desc">Wheel Well Guards Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/RTHI_uGyfTM?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/RTHI_uGyfTM/default.jpg" /></span>
<div class="desc">Cargo Liner Product Video</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/EvTjAjLNphE?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/EvTjAjLNphE/default.jpg" /></span>
<div class="desc">Husky Liners Products</div>
</a>
</li>
<li>
<a href="javascript:void();" onClick="document.getElementById('vid_frame').src='https://youtube.com/embed/-Qpc79oaJQg?autoplay=1&rel=0&showinfo=0&autohide=1'">
<span class="vid-thumb"><img width=72 src="https://img.youtube.com/vi/-Qpc79oaJQg/default.jpg" /></span>
<div class="desc">Custom Molded Mud Guards</div>
</a>
</li>
</ul>
</div>
</div>
<script id="jsbin-javascript">
/*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-item .thumb').removeClass('active');
$('.vid-item:nth-child('+current_index+') .thumb').addClass('active');
});
});
});
</script>
<script id="jsbin-source-css" type="text/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 {
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;
}
}</script>
<script id="jsbin-source-javascript" type="text/javascript">/*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-item .thumb').removeClass('active');
$('.vid-item:nth-child('+current_index+') .thumb').addClass('active');
});
});
});</script></body>
</html>
Raw
jsbin.untitled.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 {
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;
}
}
Raw
jsbin.untitled.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-item .thumb').removeClass('active');
$('.vid-item:nth-child('+current_index+') .thumb').addClass('active');
});
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment