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.
