Блог Андрея

 
 

Компонент vue 2 для вставки видео с youtube на сайт

Если просто взять и вставить видео с ютуба на сайт в iframe, инструмент PageSpeed Insights зафиксирует существенную потерю скорости загрузки страницы. Вероятно, именно поэтому мы на многих сайтах можем заметить, что вместо видео-плеера (не только youtube) сначала отображается картинка, после клика на которую подгружается уже видеоплеер.

Данный компонент реализует этот нехитрый функционал для Vue 2 приложения. Вы используете тег youtube в атрибутах которого указываете путь к странице с видео на youtube и к изображению, которое будет показываться вместо видеоплеера, пока вы не кликнете на изображении.

Ниже вы можете видеть, как работает в Vue 2 приложении код

<youtube 
    video="https://www.youtube.com/watch?v=mFlrc16xjik" 
    img="/i/relaxdemo.jpg" ></youtube> 

На 11.10.2019 скорость загрузки страницы, которую вы сейчас читаете была оценена google как 98% для мобильных и 100% для компьютеров:

Можете проверить, так ли это сейчас.

Практически этот же самый контент, но без использования замены youtube видео iframe изображением до клика по нему (то есть, на страницу бьл вставлен iframe) был оценён google гораздо хуже:

Можете проверить, так ли это сейчас.

Если вы не используете Vue 2 вы можете использовать «чистый» javascript примерно так, как описано на странице.

Скачать с гитхаб..