I have added chapters to the video. If they don’t show up on the embedded video player, simply click on the YouTube icon to open it up on YouTube.
(At the time of this post chapters are not supported on embedded videos yet)
<script>
var close_button = "https://img.icons8.com/ios/344/close-window.png";
var close_button_size = "50px";
var close_button_top = "50px";
var close_button_side = "50px";
var close_button_align = "right"; //use either "left" or "right"
var popup_background_color = "rgba(255,255,255,0)";
var background_blur = 10;
var fade_speed = 0; //this is set in milliseconds - 1000ms = 1s
jQuery(function($){
$(document).ready(function(){
//adding elements for popup
$("body").append("<div class='popup_wrapper'><iframe class='popup_iframe'></iframe><img class='popup_close' src="+close_button+"></img></div>");
//setting style for popup elements
$(".popup_wrapper").css({
"display":"none",
"position":"fixed",
"padding":0,
"margin":0,
"top":"0",
"left":"0",
"width":"100vw",
"height":"100vh",
"background-color":popup_background_color,
"z-index":9999
});
$(".popup_iframe").css({
"display":"none",
"position":"absolute",
"padding":0,
"margin":0,
"top":"0",
"left":"0",
"width":"100vw",
"height":"100vh",
});
$(".popup_close").css({
"position":"absolute",
"top":close_button_top,
"width":close_button_size,
"cursor":"pointer"
});
$("#page-container").css("transition","filter "+fade_speed+"ms ease-in-out");
if(close_button_align == "left"){
$(".popup_close").css("left",close_button_side);
}else{
$(".popup_close").css("right",close_button_side);
}
//adding function to close button
$(".popup_close").click(function(){
$("body").css("overflow","");
$("#page-container").css("filter","blur(0px)");
$('.popup_wrapper').fadeOut(fade_speed).promise().done(function() {
// $(".popup_iframe").removeAttr("src");
// $(".popup_iframe").html("");
$(".popup_iframe").attr('src','about:blank');
$(".popup_iframe").hide();
});
})
//setting function to modules
$(".custom_popup").find("a").each(function(){
var link = $(this).attr("href");
$(this).removeAttr("href");
$(this).css("cursor","pointer");
$(this).click(function(){
$("body").css("overflow","hidden");
if(background_blur >0){
$("#page-container").css("filter","blur("+background_blur+"px)");
};
$(".popup_wrapper").fadeIn(fade_speed);
$(".popup_iframe").on('load', function(){
if($(".popup_iframe").attr("src") != "about:blank"){
$(".popup_iframe").contents().find('body').css("background-color","transparent");
$(".popup_iframe").contents().find('#main-content').css("background-color","transparent");
setTimeout(function(){
$(".popup_iframe").fadeIn(fade_speed);
},0);
}
});
$(".popup_iframe").attr("src", link);
});
})
})
})
</script>