pace
pace copied to clipboard
Ignore youtube video
How to ignore youtube iframes?
Below my solution. Pace-js doesn't wait for yt iframes anymore:
JS:
Pace.on('done', function() {
let video = document.getElementsByClassName('js-video');
for (let i = 0; i < video.length; i ++) {
let iframe = document.createElement('iframe'),
src = video[i].getAttribute('data-video');
iframe.width = '500';
iframe.height = '281';
iframe.src = src;
iframe.frameborder = '0';
iframe.allow="autoplay; encrypted-media";
iframe.allowfullscreen;
video[i].appendChild(iframe);
}
});
HTML:
<div class="c-video">
<div class="c-video__item js-video" data-video="https://www.youtube.com/embed/352345235"></div>
</div>
SCSS:
.c-video {
max-width: 900px;
margin: 0 auto;
&__item {
position: relative;
max-width: 100%;
overflow: hidden;
padding-bottom: 56.25%;
padding-top: 0;
height: auto;
box-shadow: rgba(black, .25) 0 0 84px;
background: {
image: url('../img/ajax-loader1.gif');
repeat: no-repeat;
position: center;
}
iframe {
position: absolute;
left: 0;
top: 0;
height: 100%;
width: 100%;
}
}
}
Maybe it help someone..