scss Matrix YouTube API视频轮播
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了scss Matrix YouTube API视频轮播相关的知识，希望对你有一定的参考价值。
<div id="recent-videos">
<div class="left-side">
<div class="video-placeholder">
<iframe src="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</div>
<div class="right-side">
{{ Module.FieldValues.SectionText }}
<ul class="video-list"></ul>
</div>
</div><script src="https://apis.google.com/js/api.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tiny-slider/2.8.8/min/tiny-slider.js"></script>
<script>
function loadClient() {
return gapi.client.load("https://www.googleapis.com/discovery/v1/apis/youtube/v3/rest")
.then(function () {
console.log("GAPI client loaded for API");
gapi.client.setApiKey("{{ Module.FieldValues.ApiKey }}");
execute();
},
function (err) {
console.error("Error loading GAPI client for API", err);
});
}
// Make sure the client is loaded before calling this method.
function execute() {
return gapi.client.youtube.search.list({
"part": "snippet",
"channelId": "{{ Module.FieldValues.YtChannelId }}",
"maxResults": {{ Module.FieldValues.MaxNumberOfVideosToPull }},
"order": "date",
"safeSearch": "none",
"type": "video",
"alt": "json",
"prettyPrint": true
})
.then(function (response) {
// Handle the results here (response.result has the parsed body).
console.log("Response", response);
// we connected, now let's use that json
var theList = document.querySelector("ul.video-list");
for (var i = 0, l = response.result.items.length; i < l; i++) {
var item = response.result.items[i];
// console.log(item);
var vidTitle = document.createElement("span"),
vidListItem = document.createElement("li")
vidID = document.createElement("a"),
vidThumb = document.createElement("img");
vidTitle.textContent = item.snippet.title;
vidID.setAttribute("href", "https://www.youtube.com/embed/" + item.id.videoId + "?autoplay=1");
vidThumb.setAttribute("src", item.snippet.thumbnails.high.url);
// put things in the li tag
vidListItem.appendChild(vidID);
//put things into li > a
vidID.appendChild(vidThumb);
vidID.appendChild(vidTitle);
// add that item to the html list
theList.appendChild(vidListItem);
}
// cleanup
$(".video-list li").each(function () {
var theTitle = $(this).find("span"),
theImage = $(this).find("img");
theTitle.text($(this).text().replace(/&/g, "&"));
theImage.wrap("<div class='img-wrapper' />");
});
// background that image
$(".img-wrapper").each(function () {
var img = $(this).find("img");
if (img.attr("src") !== undefined) {
$(this).css({
"background-image": "url(" + img.attr("src") + ")",
});
img.remove();
}
});
// make the most recent vid the one to display a preview of
var theFirstLink = $(".video-list li:nth-child(1)").find("a").attr("href"),
newLink = theFirstLink.replace(/autoplay=1/g, "");
$("#recent-videos .video-placeholder iframe").attr("src", newLink);
// placing into carousel
jQ171(document).ready(function ($) {
var vidslider = tns({
container: '.video-list',
items: 2,
slideBy: 'page',
nav: 'true',
gutter: 0,
mouseDrag: true,
controlsText: ['', ''],
controlsPosition: 'bottom',
nav: false,
loop: false,
responsive: {
768: {
items: 2,
gutter: "25"
},
1300: {
items: 4,
gutter: "50",
}
}
});
});
// click video to load on left for desktop
if ($(window).width() > 767) {
$('.video-list li a').click(function () {
$('#recent-videos .video-placeholder iframe').attr('src', $(this).attr('href'));
return false;
});
}
},
function (err) {
console.error("Execute error", err);
});
}
gapi.load("client");
setTimeout(loadClient, 3000);
</script>$white: #e3e3e3;
$grey: #707070;
$black: #141414;
#recent-videos {
width: 100%;
display: flex;
position: relative;
flex-direction: row;
justify-content: space-between;
padding: 75px 0;
@media (max-width: 767px) {
display: block;
padding: 50px 15px;
}
.left-side {
position: relative;
width: 50%;
flex-basis: 50%;
@media (max-width: 767px) {
display: none;
}
.video-placeholder {
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
min-height: 500px;
.embed-container {
height: 100%;
}
}
}
.right-side {
flex-basis: 45%;
width: 45%;
@media (max-width: 767px) {
width: 100%;
text-align: center;
}
ul {
padding-left: 0;
margin-top: 50px;
li {
a {
bottom: 0;
position: relative;
.img-wrapper {
width: 150px;
height: 150px;
border-radius: 5px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
overflow: hidden;
@media (max-width: 767px) {
margin: 0 auto;
}
&:before {
transition: all .33s ease;
opacity: 1;
content: "\f04b";
left: 50%;
top: 50%;
line-height: 150px;
text-align: center;
transform: translate(-50%, -50%);
font-size: 40px;
font-family: fontawesome;
color: rgba(white, .5);
background: rgba($black, .1);
width: 150px;
height: 150px;
position: absolute;
}
}
span {
padding: 10px 0;
width: 150px;
font-size: 15px;
line-height: 1.2;
display: block;
color: lighten($black, 30%);
font-weight: 400;
transition: all .33s ease;
@media (max-width: 767px) {
margin: 0 auto;
width: 150px;
}
}
&:hover {
bottom: 5px;
.img-wrapper:before {
background: rgba($black, 0);
opacity: 0;
}
span {
color: $black;
}
}
}
}
}
.tns-controls {
button {
-webkit-appearance: none;
border: none;
font-family: fontawesome;
background: none;
color: $grey;
font-size: 25px;
margin: 10px;
@media (max-width: 767px) {}
&[disabled] {
color: lighten($grey, 30%);
}
&[data-controls="prev"] {
@media (min-width: 768px) {
margin-left: 0;
}
}
}
}
}
}
以上是关于scss Matrix YouTube API视频轮播的主要内容，如果未能解决你的问题，请参考以下文章