<div class="mol-video-player">
<div class="video-player-video">
<picture class="atm-image ">
<source srcset="https://picsum.photos/id/250/1280/1280" media="(min-width: 1024px)">
<source srcset="https://picsum.photos/id/250/1024/1024" media="(min-width: 768px)">
<img class="" src="https://picsum.photos/id/250/768/768" alt="" loading="lazy">
</picture>
<a class="atm-play " title="Bekijk film" href="https://www.youtube.com/embed/L6LsRTfQGDo" data-fslightbox>
<i class="atm-icon fal fa-play-circle fa-md "></i>
<span class="text">
Bekijk film
</span>
</a>
</div>
</div>
<div class="mol-video-player">
{{#if video}}
<div class="video-player-video">
{{render '@image' videoThumbnail merge=true}}
{{render '@play' play merge=true}}
</div>
{{/if}}
</div>
{
"videoThumbnail": {
"url": "https://www.youtube.com/embed/L6LsRTfQGDo"
},
"video": {
"url": "https://www.youtube.com/embed/L6LsRTfQGDo"
},
"play": {
"isLightbox": true,
"href": "https://www.youtube.com/embed/L6LsRTfQGDo"
},
"inline": {
"url": "https://download.blender.org/peach/bigbuckbunny_movies/BigBuckBunny_320x180.mp4"
}
}
.mol-video-player {
@apply pr-0 mt-0 relative mx-auto;
@apply lg:w-3/5;
.video-player-video {
@apply mx-auto left-0 top-0 relative;
&:hover {
.atm-play {
@apply scale-105;
}
}
.atm-image img {
@apply w-full;
}
.atm-video {
@apply w-full h-full;
video {
@apply w-full h-full object-cover cursor-default;
}
}
.atm-play {
backdrop-filter: blur(3px);
@apply bg-white bg-opacity-40 rounded-full w-28 h-28 transition;
@apply left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 absolute;
.text {
@apply hidden;
}
.atm-icon {
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
&::after {
content: '';
@apply bg-white absolute rounded-full w-[90px] h-[90px] left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
}
&.fa-play-circle:before {
content: '\f04b';
font-size: 30px;
font-weight: 900;
z-index: 999;
}
}
}
}
/* .video-player-video.basic {
@apply h-full;
.atm-play {
@apply bg-white bg-opacity-80 rounded-full w-12 h-12;
@apply left-4 top-auto bottom-4 absolute -translate-x-0 -translate-y-0;
}
.atm-icon {
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
&::after {
content: '';
@apply bg-white absolute rounded-full w-10 h-10 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
}
&.fa-play-circle:before {
content: '\f04b';
font-size: 16px;
font-weight: 900;
z-index: 999;
}
}
} */
&.basic {
.video-player-video {
@apply h-full;
.atm-play {
@apply bg-white bg-opacity-80 rounded-full w-12 h-12;
@apply left-4 top-auto bottom-4 absolute -translate-x-0 -translate-y-0;
}
.atm-icon {
@apply absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2;
&::after {
content: '';
@apply bg-white absolute rounded-full w-10 h-10 left-1/2 top-1/2 transform -translate-x-1/2 -translate-y-1/2 z-[-1];
}
&.fa-play-circle:before {
content: '\f04b';
font-size: 16px;
font-weight: 900;
z-index: 999;
}
}
}
}
}
(function () {
'use strict';
// Make thumbnail clickable
$('.mol-intro-media .intro-media-video .atm-play').on(
'click',
function (e) {
e.stopPropagation();
}
);
$('.mol-intro-media .intro-media-video').on('click', function (e) {
$(this).find('.atm-play').trigger('click');
});
})();
// Video Player Basic Functionality
$(document).ready(function () {
$('.mol-video-player').each(function () {
const $player = $(this);
const video = $player.find('video')[0];
const $playButton = $player.find('.atm-play');
if (video && $playButton.length) {
const $icon = $playButton.find('.atm-icon');
function updatePlayButton() {
if (video.paused) {
$icon.removeClass('fa-pause').addClass('fa-play-circle');
} else {
$icon.removeClass('fa-play-circle').addClass('fa-pause');
}
}
$playButton.on('click', function (e) {
e.preventDefault();
e.stopPropagation();
if (video.paused) {
video.play();
} else {
video.pause();
}
});
// Listen to video events to update button
$(video).on('play pause', updatePlayButton);
// Initial state
updatePlayButton();
$(video).css('cursor', 'default');
}
});
});
No notes defined.