YouTube позволяет легко вставить любое видео на YouTube на веб-страницу на вашем сайте, однако это включает в себя использование iframes, а YouTube запускает некоторые тяжелые сценарии, а внешние ресурсы необходимыми на YouTube. Это вызывает более медленную нагрузку страницы, которая иногда появляется в результатах теста скорости как возможные улучшения, которые могут быть сделаны для ускорения вашего сайта.
Мы разработали пользовательский встроен код, поэтому, вместо того, чтобы забиваться в iframes, которые соединяются прямо к YouTube и вызовите в сценариях и других ненужных данных, мы вместо этого вместо этого встройте только изображение предварительного просмотра на вашу веб-страницу, если пользователь хочет играть в видео и они Нажмите кнопку «PLAY», небольшой скрипт, который вы встраиваете в ваш сайт, затем заменит изображение с помощью YouTubes iFrame Player, поскольку вы будете делать изначально с помощью Auto-Play. Что касается пользователей, опыт полностью одинаково. Но вы сохраняете огромное количество ресурсов, включенных на нагрузку на страницу.
Все, что вам нужно сделать, это встроить наш пользовательский JavaScript в ваш головной тег и наши правила CSS в вашем файле CSS. Затем используйте инструмент на нашем сайте ниже, чтобы генерировать теги HTML для каждого видео и поместите, что на вашем сайте.
Генератор кода YouTube Embed
Инструкции по настройке
Пожалуйста, убедитесь, что вы добавляете следующие CSS и JavaScript на свой сайт на любых страницах, которые будут использовать код, сгенерированный выше, иначе он не будет работать.
Добавьте следующий JavaScript в любом месте на вашем сайте:
//youtube video code - can be added to head or in the footer or in an external JS file.
document.addEventListener("DOMContentLoaded",
function() {
var div, n,
v = document.getElementsByClassName("youtube-player");
for (n = 0; n < v.length; n++) {
v[n].onclick = labnolIframe;
}
});
function labnolIframe() {
var iframe = document.createElement("iframe");
var embed = "https://www.youtube.com/embed/ID?autoplay=1";
iframe.setAttribute("src", embed.replace("ID", this.dataset.id) + this.dataset.ido);
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allowfullscreen", "1");
this.append(iframe);
}
Добавьте следующие CSS в файл CSS:
.iframeresponsive {
font-size: 0;
}
.youtube-player {
position: relative;
overflow: hidden;
max-width: 100%;
background: #000;
margin: 0;
height: 100%;
}
.youtube-player img:hover {
filter: brightness(75%);
}
.youtube-player img {
bottom: 0;
display: block;
left: 0;
margin: auto;
max-width: 100%;
width: 100%;
position: absolute;
right: 0;
top: 0;
border: none;
height: auto;
cursor: pointer;
transition: .4s all;
}
.youtube-player iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 100;
background: transparent;
}
.youtube-player .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEgAAAAzCAYAAAA0CE5FAAAACXBIWXMAAAsTAAALEwEAmpwYAAAGtmlUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4gPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxNDIgNzkuMTYwOTI0LCAyMDE3LzA3LzEzLTAxOjA2OjM5ICAgICAgICAiPiA8cmRmOlJERiB4bWxuczpyZGY9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkvMDIvMjItcmRmLXN5bnRheC1ucyMiPiA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtbG5zOmRjPSJodHRwOi8vcHVybC5vcmcvZGMvZWxlbWVudHMvMS4xLyIgeG1sbnM6cGhvdG9zaG9wPSJodHRwOi8vbnMuYWRvYmUuY29tL3Bob3Rvc2hvcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RFdnQ9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZUV2ZW50IyIgeG1wOkNyZWF0b3JUb29sPSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiB4bXA6Q3JlYXRlRGF0ZT0iMjAxOC0wOC0wM1QxMjo1MDo1OCswMTowMCIgeG1wOk1vZGlmeURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIHhtcDpNZXRhZGF0YURhdGU9IjIwMTgtMDgtMDNUMTI6NTk6MTMrMDE6MDAiIGRjOmZvcm1hdD0iaW1hZ2UvcG5nIiBwaG90b3Nob3A6Q29sb3JNb2RlPSIzIiBwaG90b3Nob3A6SUNDUHJvZmlsZT0ic1JHQiBJRUM2MTk2Ni0yLjEiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiB4bXBNTTpEb2N1bWVudElEPSJhZG9iZTpkb2NpZDpwaG90b3Nob3A6YWY1ZTY2OGQtZWRiNS1hYTQzLTkyYjctYTBjOTJiZDE4Zjg1IiB4bXBNTTpPcmlnaW5hbERvY3VtZW50SUQ9InhtcC5kaWQ6MGFkNTA2NjUtMWRjMi0zYTRjLWI1NjItYjlhMjBlNGYyZDAxIj4gPHhtcE1NOkhpc3Rvcnk+IDxyZGY6U2VxPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0iY3JlYXRlZCIgc3RFdnQ6aW5zdGFuY2VJRD0ieG1wLmlpZDowYWQ1MDY2NS0xZGMyLTNhNGMtYjU2Mi1iOWEyMGU0ZjJkMDEiIHN0RXZ0OndoZW49IjIwMTgtMDgtMDNUMTI6NTA6NTgrMDE6MDAiIHN0RXZ0OnNvZnR3YXJlQWdlbnQ9IkFkb2JlIFBob3Rvc2hvcCBDQyAoV2luZG93cykiLz4gPHJkZjpsaSBzdEV2dDphY3Rpb249InNhdmVkIiBzdEV2dDppbnN0YW5jZUlEPSJ4bXAuaWlkOjhjOGE0NTY0LTdmYTItY2Q0Ny1hNjAzLTZjNjgzMWY0NGYyZCIgc3RFdnQ6d2hlbj0iMjAxOC0wOC0wM1QxMjo1OToxMyswMTowMCIgc3RFdnQ6c29mdHdhcmVBZ2VudD0iQWRvYmUgUGhvdG9zaG9wIENDIChXaW5kb3dzKSIgc3RFdnQ6Y2hhbmdlZD0iLyIvPiA8cmRmOmxpIHN0RXZ0OmFjdGlvbj0ic2F2ZWQiIHN0RXZ0Omluc3RhbmNlSUQ9InhtcC5paWQ6MGYxZDlhYzItYzY2OS01NjQ3LThiZWMtNjk0MmM2NGQ0M2Y4IiBzdEV2dDp3aGVuPSIyMDE4LTA4LTAzVDEyOjU5OjEzKzAxOjAwIiBzdEV2dDpzb2Z0d2FyZUFnZW50PSJBZG9iZSBQaG90b3Nob3AgQ0MgKFdpbmRvd3MpIiBzdEV2dDpjaGFuZ2VkPSIvIi8+IDwvcmRmOlNlcT4gPC94bXBNTTpIaXN0b3J5PiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/Pm79JJEAAAeCSURBVGgF7cFbjNx1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) no-repeat;
filter: grayscale(100%);
cursor: pointer;
}
.youtube-player .play:hover {
filter: grayscale(0%);
}
Оригинал: “https://dev.to/deantecoder/optimized-youtube-embed-code-generator-3lk6”