168 lines
4.1 KiB
Plaintext
168 lines
4.1 KiB
Plaintext
|
|
<div class="videos-header">Video Spotlight</div>
|
|
<div class="main-slider homepage-video-carousel" id="main-slider">
|
|
{% comment %} <div class="video-slide">
|
|
<div class="carousel-slide-trigger">
|
|
<div class="thumbnail-wrapper">
|
|
<video width="320" height="240" controls>
|
|
<source src="https://s3.amazonaws.com/static.northpass.com/J%26J/video-embed-test_delete_later.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
|
|
<div class="img-caption">
|
|
<div class="img-caption-title">Video Title 1</div>
|
|
<div class="img-caption-description">Nulla quis lorem ut libero malesuada feugiat. Proin eget tortor risus. Vivamus suscipit tortor eget felis porttitor volutpat. Pellentesque in ipsum id orci porta dapibus.</div>
|
|
</div>
|
|
</div>
|
|
</div> {% endcomment %}
|
|
{% comment %} <div class="video-slide">
|
|
<div class="carousel-slide-trigger">
|
|
<div class="thumbnail-wrapper">
|
|
<video width="320" height="240" controls>
|
|
<source src="https://s3.amazonaws.com/static.northpass.com/J%26J/video-embed-test_delete_later.mp4" type="video/mp4">
|
|
Your browser does not support the video tag.
|
|
</video>
|
|
</div>
|
|
<div class="img-caption">
|
|
<div class="img-caption-title">Here is another video title</div>
|
|
<div class="img-caption-description">Mauris blandit aliquet elit, eget tincidunt nibh pulvinar a. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus suscipit tortor eget felis porttitor volutpat. Quisque velit nisi, pretium ut lacinia in, elementum id enim.</div>
|
|
</div>
|
|
</div>
|
|
</div> {% endcomment %}
|
|
</div>
|
|
|
|
<script>
|
|
|
|
$(document).ready(function() {
|
|
|
|
const videoInfo = {{current_school.properties.video_carousel}}
|
|
|
|
if (videoInfo.length > 0) {
|
|
$('#main-slider').slick({
|
|
slidesToShow: 1,
|
|
slidesToScroll: 1,
|
|
//autoplay: true,
|
|
autoplaySpeed: 3000,
|
|
dots: true,
|
|
infinite: true,
|
|
arrows: false,
|
|
gutter: 8,
|
|
});
|
|
|
|
videoInfo.forEach(function(video) {
|
|
|
|
const videoSlide = $(`<div class='video-slide'><div class='carousel-slide-trigger'><div class='thumbnail-wrapper'><video width='320' height='240' controls><source src='${video.video_url}' type='video/mp4'>Your browser does not support the video tag.</video></div><div class="img-caption"><div class="img-caption-title">${video.video_title}</div><div class="img-caption-description">${video.video_description}</div></div></div></div>`)
|
|
|
|
$('#main-slider').slick("slickAdd", videoSlide);
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
</script>
|
|
|
|
<style>
|
|
|
|
.videos-header {
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
margin-bottom:16px;
|
|
}
|
|
|
|
.homepage-video-carousel {
|
|
margin-bottom:44px;
|
|
}
|
|
|
|
.thumbnail-wrapper {
|
|
position:relative;
|
|
width: 100%;
|
|
/*height: 100%;*/
|
|
}
|
|
|
|
.video-thumbnail {
|
|
background-size: cover;
|
|
position: absolute;
|
|
width: 100%;
|
|
left: 0;
|
|
height: 100%;
|
|
top: 0;
|
|
background-position: center;
|
|
}
|
|
|
|
.img-caption {
|
|
background: #f3f3f3;
|
|
color: #212121;
|
|
padding: 16px;
|
|
margin-top: -6px;
|
|
flex:1;
|
|
}
|
|
|
|
.img-caption-title {
|
|
font-size: 20px;
|
|
font-weight: 700;
|
|
line-height: 26px;
|
|
margin-bottom: 8px;
|
|
}
|
|
|
|
.carousel-slide-trigger {
|
|
display: flex;
|
|
flex-direction: column;
|
|
padding: 0;
|
|
overflow: hidden;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
|
|
.slick-dots {
|
|
display: flex;
|
|
justify-content: center;
|
|
margin: 24px 0 0;
|
|
padding: 0;
|
|
list-style-type: none;
|
|
}
|
|
|
|
.slick-dots li {
|
|
margin: 0 0.25rem;
|
|
}
|
|
|
|
.slick-dots button {
|
|
display: block;
|
|
width: 12px;
|
|
height: 12px;
|
|
padding: 0;
|
|
border: none;
|
|
border-radius: 100%;
|
|
background-color: transparent;
|
|
border: 1px solid #009999;
|
|
text-indent: -9999px;
|
|
}
|
|
|
|
.slick-dots li.slick-active button {
|
|
background-color: #009999;
|
|
}
|
|
|
|
video {
|
|
width: 100%;
|
|
height: auto;
|
|
}
|
|
|
|
@media (min-width:768px) {
|
|
.videos-header {
|
|
font-size: 20px;
|
|
margin-bottom:24px;
|
|
}
|
|
|
|
.img-caption {
|
|
padding: 16px 32px;
|
|
}
|
|
|
|
.img-caption-title {
|
|
font-size: 22px;
|
|
line-height: 28px;
|
|
}
|
|
}
|
|
|
|
|
|
</style> |