Как оптимизированно вставить youtube видео на страницу, что не тормозила загрузка скрипта меню?

Question

[Андрей Филимонов]

Здравствуйте, при загрузке сайта на мобильном в браузере Chrome первые 30 секунд не реагируют переходы из меню. Сайт всего 1 страница, переходы из меню внутри страницы.
Вот записал видео с экрана с проблемой.
В FireFox проблема не повторяется, при супер быстром интернете может не повториться тоже. Скорее всего тормозит единственное ютуб видео на странице, вставлено так:

<div style="position: relative; height: 0; padding-bottom: 56.25%;"><iframe src="//www.youtube.com/embed/B02INhxSnQY?ecver=2?rel=0&amp;enablejsapi=1&amp;controls=1&amp;start=0" loading="lazy" width="640" height="360" frameborder="0" style="position:absolute;width:100%;height:100%;left:0" allowfullscreen=""></iframe></div>

Что сделать, чтобы не возникало задержки у меню?

Comments

[ProjectSoft]

Можно попробовать встраивать в popup. Например Fancybox
Вам не нужен будет фрейм в HTML коде, а только ссылка. В JS скрипте обработка ссылки.

[smilingcheater]

Возможно у вас тормоза не из-за ифрейма, а из за более чем 10 мегабайт фотографий на странице.

[Андрей Филимонов]

ProjectSoft, можно, но нужно видео сразу без допкликов

[ProjectSoft]

Андрей Филимонов, тогда не понимаю, зачем короткий ролик на youtube? Видео по массе не очень большое. Да и ffmpeg никто не отменял.
Разместите файл(ы) у себя и сделайте нормальную вставку video. По идее вам нужен только один формат видео - mp4 (H.264) поддерживается всеми браузерами. Но для удобства можно добавить другие форматы.
Пример:

HTML

<video poster="image-video.jpg" preload="metadata"  controls="controls">
	<source src="video.mp4" type="video/mp4">
	<source src="video.ogv" type="video/ogg">
	<source src="video.webm" type="video/webm">
</video>

PS:
Можно поиграться с preload
preload="none"
Тогда видео не будет загружаться, а будет отображён постер. При клике - загрузка + воспроизведение.

[Андрей Филимонов]

smilingcheater, не, я удалял блоки поочерёдно и без блока видео было норм, остальное влияло

[Андрей Филимонов]

ProjectSoft, Спасибо, дело говорите, но нужен ютуб ролик, часть аудитории на канал переходит. Я вам написал в ВК с просьбой оценить оптимизацию сайта, если несложно, то ответьте, пожалуйста)

[ProjectSoft]

Андрей Филимонов,

с просьбой оценить оптимизацию сайта, если несложно, то ответьте, пожалуйста

Так вам здесь уже дали ответ. Оптимизируйте изображения. Добейтесь самого малого объёма данных.
Не используйте изображения размером большего, чем максимальное отображение.
Например.
Имеется вывод изображений в новостном блоке.
Вы используете размер изображения 2560х1707 (смотрим), а максимальный размер нужен всего 524х349.
Вы используете WP. Что мешает использовать get_the_post_thumbnail($post_id, array(524, 349));?
Короче оптимизируйте всё. Проверьте все изображения, сожмите код файлов js, css ... Используйте для этого максимальные возможности wp.

Answer 1

[Павел]

Если проблема именно в видео, то можно подгружать видео после загрузки всей страницы. Каким-нибудь вот таким скриптом

$(document).ready(function () {
  var ytFrame = '<iframe id="player" class="video" src="https://www.youtube.com/embed/B02INhxSnQY?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen" width="560" height="315"></iframe>';
$('.ytLoader').html(ytFrame);
});

<div class="ytLoader">
           </div>

Comments

[Андрей Филимонов]

Сделал так, появилась ошибка, как можно исправить?

[Павел]

Андрей Филимонов, чистый js

document.addEventListener('DOMContentLoaded', function() {
  var ytFrame = '<iframe id="player" class="video" src="https://www.youtube.com/embed/B02INhxSnQY?autoplay=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen="allowfullscreen" width="560" height="315"></iframe>';
  document.querySelector('.ytLoader').innerHTML = ytFrame;
});

[Андрей Филимонов]

Павел, Спасибо большое) Подскажите, а до этого был не чистый js, а что? Как называется?

[Dymok]

Андрей Филимонов, jquery