// Cache selectors
var lastId,
topMenu = $(".header_navigation_list"),
topMenuHeight = topMenu.outerHeight() + 15,
// All list items
menuItems = topMenu.find("a"),
// Anchors corresponding to menu items
scrollItems = menuItems.map(function () {
var item = $($(this).attr("href"));
if (item.length) {
return item;
}
});
// Bind click handler to menu items
// so we can get a fancy scroll animation
menuItems.click(function (e) {
e.preventDefault();
var href = $(this).attr("href"),
offsetTop = href === "#" ? 0 : $(href).offset().top - topMenuHeight + 1;
$("html, body").stop().animate({
scrollTop: offsetTop
}, 300);
e.preventDefault();
});
// Bind to scroll
$(window).scroll(function () {
// Get container scroll position
var fromTop = $(this).scrollTop() + topMenuHeight;
// Get id of current scroll item
var cur = scrollItems.map(function () {
if ($(this).offset().top < fromTop)
return this;
});
// Get the id of the current element
cur = cur[cur.length - 1];
var id = cur && cur.length ? cur[0].id : "";
if (lastId !== id) {
lastId = id;
// Set/remove active class
menuItems
.parent().removeClass("active")
.end().filter("[href='#" + id + "']").parent().addClass("active");
}
});
function findVideos() {
let videos = document.querySelectorAll(".video");
for (let i = 0; i < videos.length; i++) {
setupVideo(videos[i]);
}
}
function setupVideo(video) {
let link = video.querySelector(".video__link");
let media = video.querySelector(".video__media");
let button = video.querySelector(".video__button");
let id = parseMediaURL(media);
video.addEventListener("click", (e) => {
e.preventDefault();
let iframe = createIframe(id);
link.remove();
button.remove();
video.appendChild(iframe);
});
link.removeAttribute("href");
video.classList.add("video--enabled");
}
function parseMediaURL(media) {
let regexp = /https:\/\/i\.ytimg\.com\/vi\/([a-zA-Z0-9_-]+)\/maxresdefault\.jpg/i;
let url = media.src;
let match = url.match(regexp);
return match[1];
}
function createIframe(id) {
let iframe = document.createElement("iframe");
iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute("allow", "autoplay");
iframe.setAttribute("src", generateURL(id));
iframe.classList.add("video__media");
return iframe;
}
function generateURL(id) {
let query = "?rel=0&showinfo=0&autoplay=1";
return "https://www.youtube.com/embed/" + id + query;
}
findVideos();
});
Мне кажется, что здесь сидят умные люди, но не настолько чтобы рендерить и дебажить такой код в голове
Обсуждают сегодня