How to put OK.ru Video Playlist

 

1. Go to Theme => Edit HTML and copy the following code from above </head>

2. Copy the following code from above </body>, then click the Save Icon and leave the Edit HTML tab.

$('#ok-playlist').each(function () {

    let $this = $(this),

        zeroIndex = 0,

        isDotBlogSpot = false;

    const okUrl = (isUrl) => {

        isUrl = isDotBlogSpot === true ? "https://vdoview.tumblr.com/?id=" : "https://ok.ru/videoembed/";

        return isUrl;

    }

    const autoPlay = (isAutoPlay) => {

        isAutoPlay = isDotBlogSpot !== true ? "?autoplay=1" : "";

        return isAutoPlay;

    }

    const buildOkDotRu = () => {

        let okDotRu = "";

        okDotRu += '<div class="ok-container">';

        okDotRu += '<div class="ok-responsive">';

        okDotRu += '<iframe id="ok-iframe" src="' + okUrl() + window.atob(okVideoID[zeroIndex]) + '" width="100%" height="100%" allowfullscreen="true" loading="lazy"></iframe></div>';

        okDotRu += '<div class="ok-wrap">';

        okDotRu += '<div class="ok-playlist">';

        okVideoID.forEach((okItems, index) => {

            okDotRu += '<div class="ok-list" data-id="' + okVideoID[index] + '">' + (index + 1) + '</div>';

        });

        okDotRu += '</div></div></div>';

        return okDotRu;

    }

    const activeFirstVideo = (isFirstVideo) => {

        isFirstVideo = $('.ok-list').first().addClass('is-active');

        return isFirstVideo;

    }

});

3. Copy the following code into the Blog Post by converting to HTML view

<div id="ok-playlist"></div> <script> let okVideoID = ["1185274202866", "1622701509370", "1511865584227"]; </script>

4. Change each Video ID above and click Publish.