Может быть, вы хотите сделайть служебный сайт? Могу предложить усовершенствованные электрические расширения, стальные хаки для усмирения кода, модули, плагины, слезоточивые скрипты. Есть также шаблоны, верстка, бекдоры, стили

Мои расширения

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

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) - прелодера на время загрузки фрейма

Комментарии

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

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

Мои расширения

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

© 2007 - 2021 Все права на размещаемый контент принадлежат Beliyadm, за исключением отдельно указанных случаев.
Полное или частичное заимствование приветствуется при наличии обратной ссылки на мой блог