pace icon indicating copy to clipboard operation
pace copied to clipboard

Ignore youtube video

Open cutme opened this issue 7 years ago • 1 comments

How to ignore youtube iframes?

cutme avatar Aug 22 '18 11:08 cutme

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..

cutme avatar Aug 22 '18 12:08 cutme