Utilizing lazyYT helps to enhance the loading speed of YouTube videos. Once loaded, these lazyYT videos are then placed within a slick slider. However, an issue arises where the videos stick together without any margin between them. To address this problem, I manually added a specific class to the video div.
<div class="js-lazyYT" id="video-slide" data-youtube-id="<?php echo $video['video_link']; ?>" data-width="500" data-height="425"></div>
I assigned a margin through CSS which initially worked well until the first video reloaded and caused all three initial videos to join together once again.
#video-slide{
width: 500px !important;
height: 425px !important;
margin-right: 10px;
-webkit-border-radius: 15px;
-moz-border-radius: 15px;
border-radius: 15px;
}
It seems like the first three entries in the slider trigger another reload when they become visible. Any insights on this?
;(function ($) {
'use strict';
// rest of the code here
}(jQuery));