Skip to content

Instantly share code, notes, and snippets.

@zwaper

zwaper/index.html

Created April 20, 2021 01:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save zwaper/0d6064d6b46fb92c06896546f6cdb6c4 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save zwaper/0d6064d6b46fb92c06896546f6cdb6c4 to your computer and use it in GitHub Desktop.
Download ZIP
Youtube Playlist
Raw
index.html
<!--<div class="container">
<header>
<h3 class="logo">WeoW Music</h3>
</header>
<section id="video">
</section>
</div>-->
<div style="clear: both; max-width: 700px; position: relative; margin: auto;" id="yottie_1">
<div class="yottie-widget-inner">
<div class="yottie-widget-header yottie-visible">
<div class="yottie-widget-header-inner">
<a class="yottie-widget-header-logo" href="https://www.youtube.com/channel/UCxovSRa8yigaVWIB67wvgOw/" title="Weow Music" target="_blank" rel="nofollow">
<img src="https://yt3.ggpht.com/ytc/AAUvwnjbZZoI7KimMX8bB3H_86_5S6Vjd2AzCsyKfhnZVA=s88-c-k-c0x00ffffff-no-rj"></a></div>
<div class="yottie-widget-header-channel-title">
<a href="https://www.youtube.com/channel/UCxovSRa8yigaVWIB67wvgOw/" title="Weow Music" target="_blank">Weow Music</a>
</div>
</div>
<div class="yottie-widget-feed-section-slide" style="height: 100%; padding-top: 20px; padding-left: 20px;">
<div class = "yottie-widget-video-overlay">
</div>
<div class="list">
<div id="list">
<div class="list-inner">
</div>
</div>
</div>
</div>
</div>
Raw
script.js
$(document).ready(function() {
var key = "AIzaSyB7mPs042i3i0IF0k5f3H1OimLbvBHeYk0";
var playlistId = "PLkSaehvtoPcxdDhbdig_EYYVl5ONrhAqt";
var URL = "https://www.googleapis.com/youtube/v3/playlistItems";
var options = {
part: "snippet",
key: key,
maxResults: 20,
playlistId: playlistId
};
loadVids();
function loadVids() {
$.getJSON(URL, options, function(data) {
var id = data.items[0].snippet.resourceId.videoId;
console.log(data);
mainVid(id);
resultsLoop(data);
});
}
function mainVid(id) {
$("#video").html(`
<iframe width="100%" height="315" src="https://www.youtube.com/embed/${id}" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
`);
}
function resultsLoop(data) {
$.each(data.items, function (i, item) {
var thumb = item.snippet.thumbnails.high.url;
var title = item.snippet.title;
var desc = item.snippet.description.substring(0, 100);
var vid = item.snippet.resourceId.videoId;
$('.list-inner').append(`
<article class="item" data-key="${vid}">
<img src="${thumb}" alt="" class="thumb">
<div class="details">
<div class="title">${title}</div>
<div class="description">${desc}...</div>
</article>
`);
});
}
$('.list-inner').on('click', 'article', function () {
var id = $(this).attr('data-key');
mainVid(id);
});
});
document.addEventListener("touchstart", function(){}, true)
Raw
scripts
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
Raw
style.css
@mixin font-base {
padding: 0;
margin: 0;
line-height: 1.3;
font-weight: 600;
}
h4 {
@include font-base;
}
body {
background-color: #eee;
}
.container {
background-color: #fff;
width: 600px;
margin: 0 auto;
header {
padding: 20px 0;
background-color: #fff;
}
#video {
padding-bottom: 10px;
}
}
.list{
background: rgb(51, 51, 51);
max-height: 500px;
overflow-y: auto;
overflow-x: hidden;
margin: 0 auto;
max-width: 100%;
}
article {
display: flex;
align-items: center;
padding: 0;
margin-bottom: 20px;
margin-right: 20px;
width: 400px;
&:hover {
cursor: pointer;
}
}
.thumb {
height: 200px;
width: auto;
}
.title {
color: rgb(200, 200, 200);
display: inline-block;
overflow: hidden;
white-space: nowrap;
line-height: 18px;
font-weight: 700;
font-size: 14px;
max-width: 60%;
white-space: nowrap;
text-overflow: ellipsis;
-o-overflow: ellipsis;
}
.description {
color: rgb(112, 112, 112);
position: relative;
z-index: 3;
-webkit-box-sizing: border-box;
box-sizing: border-box;
overflow: hidden;
white-space: nowrap;
max-width: 60%;
white-space: nowrap;
text-overflow: ellipsis;
-o-overflow: ellipsis;
}
.details {
padding: 8px 22px;
font-size: 12px;
}
.yottie-widget-video-overlay {
position: absolute;
display: none;
visibility: hidden;
z-index: 2;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
-webkit-transition: all .35s ease;
-o-transition: all .35s ease;
transition: all .35s ease;
background: rgba(255, 255, 255, .95)
}
.yottie-widget-inner {
border-radius: 10px;
overflow: hidden
}
.yottie-widget-header-inner {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;
padding: 16px 20px;
position: relative;
z-index: 2
}
.yottie-widget-header {
display: none !important;
z-index: 1;
position: relative;
background: #fafafa
}
.yottie-widget-header.yottie-visible {
display: block !important
}
.yottie-widget-header-logo {
position: center;
display: block;
-webkit-box-flex: 1;
margin-right: 16px;
width: 80px;
height: 80px;
background: #fff;
border-radius: 50%;
overflow: hidden
}
.yottie-widget-header-info {
-webkit-box-flex: 1;
-ms-flex-positive: 1;
flex-grow: 1
}
.yottie-widget-header-channel-title {
-o-text-overflow: ellipsis;
text-align: center;
text-overflow: ellipsis;
-webkit-box-orient: vertical
}
.yottie-widget-header-channel-properties {
overflow: hidden;
max-height: 16px;
font-size: 12px;
font-weight: 400;
line-height: 16px;
color: rgba(17, 17, 17, .7)
}
.yottie-widget-header-channel-properties-item {
display: inline-block
}
.yottie-widget-header-channel-properties-item-divider {
margin: 0 4px
}
.yottie-mw-1354 .yottie-widget-header-accent .yottie-widget-header-banner {
background-size: auto 100%
}
.yottie-mw-1056 .yottie-widget-header-classic .yottie-widget-header-banner {
background-size: auto 100%
}
#yottie_1 .yottie-widget-header {
background: rgb(51, 51, 51);
}
#yottie_1 .yottie-widget-header-overlay {
background: rgba(51, 51, 51, 0.81);
}
#yottie_1 .yottie-widget-header-channel-title,
#yottie_1 .yottie-widget-header-channel-title a {
color: rgb(255, 255, 255);
}
#yottie_1 .yottie-widget-header-channel-title:hover,
#yottie_1 .yottie-widget-header-channel-title a:hover {
color: rgb(77, 178, 255);
}
#yottie_1 .yottie-widget-header-channel-caption {
color: rgb(255, 255, 255);
}
#yottie_1 .yottie-widget-header-channel-caption a {
color: rgb(77, 178, 255);
}
#yottie_1 .yottie-widget-header-channel-caption a:hover {
color: rgb(255, 255, 255);
}
#yottie_1 .yottie-widget-header-channel-properties-item {
color: rgb(160, 160, 160);
}
#yottie_1 .yottie-widget-nav {
background: rgb(51, 51, 51);
}
#yottie_1 .yottie-widget-nav-list-item a {
color: rgb(255, 255, 255, 0.5);
}
#yottie_1 .yottie-widget-nav-list-item:hover a {
color: rgb(255, 255, 255);
}
#yottie_1 .yottie-widget-nav-list-item.yottie-active a,
#yottie_1 .yottie-widget-nav-list-item.yottie-active:hover a {
color: rgb(255, 66, 66);
}
#yottie_1 .yottie-widget-nav-list-item:hover::after {
background: rgb(255, 66, 66);
}
#yottie_1 .yottie-widget-nav-list-item.yottie-active:hover::after,
#yottie_1 .yottie-widget-nav-list-item.yottie-active::after {
background: rgb(255, 66, 66);
}
#yottie_1 .yottie-widget-nav-control-left::before {
background: linear-gradient(to left, rgba(255, 255, 255, 0), rgb(51, 51, 51) 60%);
}
#yottie_1 .yottie-widget-nav-control-right::before {
background: linear-gradient(to right, rgba(255, 255, 255, 0), rgb(51, 51, 51) 60%);
}
#yottie_1 .yottie-widget-nav-control span::before,
#yottie_1 .yottie-widget-nav-control span::after {
background: rgb(255, 255, 255, 0.5);
}
#yottie_1 .yottie-widget-nav-control:hover span::before,
#yottie_1 .yottie-widget-nav-control:hover span::after {
background: rgb(255, 66, 66);
}
#yottie_1 .yottie-widget-feed {
background: rgb(51, 51, 51);
}
#yottie_1 .yottie-widget-feed-section-arrow {
background: rgba(255, 255, 255, 0.4);
}
#yottie_1 .yottie-widget-feed-section-arrow:hover {
background: rgba(255, 255, 255, 0.8);
}
#yottie_1 .yottie-widget-feed-section-arrow span::before,
#yottie_1 .yottie-widget-feed-section-arrow span::after,
#yottie_1 .yottie-widget-feed-section-arrow::before {
background: rgb(34, 34, 34);
}
#yottie_1 .yottie-widget-feed-section-arrow:hover span::before,
#yottie_1 .yottie-widget-feed-section-arrow:hover span::after,
#yottie_1 .yottie-widget-feed-section-arrow:hover::before {
background: rgb(255, 0, 0);
}
#yottie_1 .yottie-widget-feed-section-scrollbar {
background: rgb(85, 85, 85);
}
#yottie_1 .yottie-widget-feed-section-scrollbar .swiper-scrollbar-drag {
background: rgba(255, 255, 255, 0.4);
}
#yottie_1 .yottie-widget-video {
background: rgb(51, 51, 51);
}
#yottie_1 .yottie-widget-feed-section-slide {
background: rgb(51, 51, 51);
}
#yottie_1 .yottie-widget-video-overlay {
background: rgba(28, 28, 28, 0.9);
}
#yottie_1 .yottie-widget-video-preview-play .maincolor {
fill: rgba(255, 255, 255, 0.4);
}
#yottie_1 .yottie-widget-video:hover .yottie-widget-video-preview-play .maincolor {
fill: rgba(255, 255, 255, 0.8);
}
#yottie_1 .yottie-widget-video-preview-marker-duration {
background: rgba(28, 28, 28, 0.81);
color: rgb(255, 255, 255);
}
#yottie_1 .yottie-widget-video-info-title {
color: rgb(200, 200, 200);
}
#yottie_1 .yottie-widget-video-info-title:hover {
color: rgb(200, 200, 200);
}
#yottie_1 .yottie-widget-video-info-passed-time {
color: rgb(116, 116, 116);
}
#yottie_1 .yottie-widget-video-info-caption {
color: rgb(200, 200, 200);
}
#yottie_1 .yottie-widget-video-info-caption a {
color: rgb(42, 163, 255);
}
#yottie_1 .yottie-widget-video-info-caption a:hover {
color: rgb(77, 178, 255);
}
.yottie-widget-video {
position: relative;
overflow: hidden;
float: left;
-webkit-backface-visibility: hidden;
backface-visibility: hidden
}
.yottie-widget-video-horizontal {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
cursor: pointer
}
.yottie-widget-header-logo {
display: block;
-webkit-box-align: center;
-webkit-box-flex: 1;
-ms-flex: auto 0 0px;
flex: auto 0 0;
background: #fff;
border-radius: 50%;
overflow: hidden
}
Raw
styles
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" />
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment