Откомменченное

2020 05 мая

Youtube без лишней нагрузки

Как мы все знаем, при вставке ролика с ютуба штатной опцией "поделиться" - вставляется ифрейм, который сразу же тащит за собой 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;
        }

Шаг последний - немного JS (у меня Jquery, уж прошу простить)

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 - да, без него можно обойтись, но в моей верстке требовался еще и заголовок и текст, чтобы не усложнять верстку материала для редактора - сделал загрузку трубы в создаваемый отдельно элемент

Результат

Можно посмотреть здесь https://bcks.su/afisha/konkurs-chtetsov-my-pomnim-pavshikh-imena

Достаточно в материал вставить один див с нужным классом и идентификатором ролика - и все становится прекрасно

Чего нехватает:

- определения, есть ли у ютуба превью указанного размера и выбора другой (по статусу файла videoImageUrl в 404) - прелодера на время загрузки фрейма

Комментарии

Оставить коммент

Защитный код
Обновить

Откомменченное