Как мы все знаем, при вставке ролика с ютуба штатной опцией "поделиться" - вставляется ифрейм, который сразу же тащит за собой 2-3 метра всякого хламного кода. На одном из проектов, когда количество роликов на странице выросло овер 20 - вес страницы стал под 60 метров, выбесило. Начал искать варианты решения и везде свои костыли и неудобства.
Потому презентую свой велосипед (идею спёр уже не помню где ну и модифицировал под себя) в виде десяти строк кода, который в принципе прекрасно работает и вес страницы с 38 роликами ютуба теперь 4 метра вместо 80 (на самом деле нет, но об этом позже).
Что в результате - по умолчанию у нас будет грузиться только превьюшка ролика с ютуба и лишь по клику подставляем в этот блок оригинальный ифрейм с интерфейсом. Логично видим, что ютубовский код грузится только по запросу посетителя, а не по умолчанию в безумном размере. Кнопку ютуба мы эмулируем через псевдоэлементы - в моем случае я использовал иконку FontAwesome - можете поставить свою картинку да и вообще это уже мелочи. Ведь даже с одним роликом на странице не факт, что клиент его просмотрит, но мы уже ему загрузили лишние 2 метра скриптов.
1 | <div class="youtube" id="ID ролика"></div> |
Блок ютуба .youtube у меня встроен в сетку, потому ширину нужно задавать нужную кастомную, ну и общие стили оформления на ваш вкус
1 23 45 67 89 1011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 3435 3637 3839 4041 4243 4445 46 | .youtube { width: 100%; min-height: 300px; } .youtube .youtubeinner { position: relative; width: 100%; height: 315px; background-position: center; background-repeat: no-repeat; background-size: cover; transition: all 200ms ease-out; cursor: pointer; box-shadow: 0 0 5px #222; -webkit-box-shadow: 0 0 5px #222; -moz-box-shadow: 0 0 5px #222; } .youtube .play { width: 64px; height: 64px; position: absolute; height: 100%; width: 100%; opacity: .8; transition: all 0.2s ease-out; } .youtube .play:before { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 70px; height: 50px; background: rgba(0,0,0,0.7); -moz-border-radius: 15px; -webkit-border-radius: 15px; border-radius: 15px; -webkit-transition: all 200ms ease-in-out 0s;-moz-transition: all 200ms ease-in-out 0s;-o-transition: all 200ms ease-in-out 0s; } .youtube .play:after { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); content: ''; width: 30px; height: 30px; color: #fff; text-align: center; line-height: 30px; font-family: 'FontAwesome'; content: '\f04b'; font-size: 20px; -webkit-transition: all 100ms ease-in-out 0s;-moz-transition: all 100ms ease-in-out 0s;-o-transition: all 100ms ease-in-out 0s; } .youtube .play:hover:before { background: red; } |
1 23 45 67 89 1011 1213 1415 1617 1819 2021 2223 2425 2627 2829 3031 3233 3435 3637 38 | // load youtube by id $('.youtube').each(function() { // добавим внутренний див, куда будем пихать видео под заголовком $(this).append('<div class="youtubeinner"></div>'); var videoLoadBlock = $(this).children('.youtubeinner'); var thisID = $(this).attr('id'); // картинка /* Разного размера\качества превью, которые генерит ютуб. Учитывать, что если загруженное виде далеко от fullHD - то и превью maxresdefault не будет, отобразится заглушка. default hqdefault mqdefault sddefault maxresdefault */ // videoImageUrl var videoImageUrl = 'url(https://i.ytimg.com/vi/' + this.id + '/hqdefault.jpg)'; $(videoLoadBlock).css('background-image', videoImageUrl); // Добавляем иконку Play поверх миниатюры videoLoadBlock.append($('<div/>', {'class': 'play'})); }); $(document).on('click', '.youtube .youtubeinner', function(){ // берем ID видео, формируем фрейм с параметрами var tubeid = $(this).parent('.youtube').attr('id'); // создаем iframe со включенной опцией autoplay var iframe_url = "https://www.youtube.com/embed/" + tubeid + "?autoplay=1&autohide=1"; // Высота и ширина iframe должны быть такими же, как и у родительского блока var iframe = $('<iframe />', {'allowfullscreen': 'true', 'src': iframe_url, 'allow': 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture', 'width': $(this).width(), 'height': $(this).height() }) // Заменяем превью оригинальным фреймом $(this).html(iframe); }); |
Зачем мне внутри еще и блок .youtubeinner - да, без него можно обойтись, но в моей верстке требовался еще и заголовок и текст, чтобы не усложнять верстку материала для редактора - сделал загрузку трубы в создаваемый отдельно элемент
Достаточно в материал вставить один див с нужным классом и идентификатором ролика - и все становится прекрасно
Комментарии