@evo/youtube

Youtube

Компонент подгружает iframe с видео только после клика на изображение(превью).
Это способуствует экономии около 500Кб на каждом видео при загрузке страницы
и более высокой оценке в PageSpeed Insights.

По умолчанию используется превью в формате webp в самом высоком качестве -
maxresdefault и если такое не найдено будет выбрано следующее более низкого
качества вплоть до значения mqdefault. Если и оно отсутствует, то будет удален
тег <source> где указывается путь к wepb изображению и выше описанные
шаги повторяются для превью в формате jpg.

Так как youtube при 404й ошибке отдает заглушку (превью не найдено или ссылка битая), то
принцип проверки наличия этого превью заключается в проверке высоты текущего изображения.
У заглушки оно равняется 90рх, поэтому все что <= этому размеру приравнивается к
отсутствию превью и будет отображаться спиннер на черном фоне.

Размеры превью:

• maxresdefault (1280×720px)
• sddefault (640×480px)
• hqdefault (480×360px)
• mqdefault (320×180px)
• default (120x90px) Это значение не используется по указанным выше причинам!

Использование

Пример:

import Youtube from '@evo/youtube';

<Youtube
    id='-OHgXJR1r4E'
    buttonAriaLabel={i18n`Запустить видео`}
/>

В этом случае размер превью будет выбран самостоятельно с наилучшим доступным качеством.

Dependencies

В проекте, который будет использовать данный компонент, должны быть установлены следующие зависимости:

"peerDependencies": {
    "classnames": "^2.1.3",
    "react": "^16.2.0",
    "react-dom": "^16.2.0",
    "prop-types": "^15.6.1"
},

Props

Name	Type	Default	Description
id	String	Required	id видео. Пример для: https://www.youtube.com/watch?v=-OHgXJR1r4E id='-OHgXJR1r4E'
autoplay	bool	true	Автовоспроизведение видео сразу после клика по превью или нажатию клавиш SPACE или ENTER когда видео находится в фокусе. Пример: autoplay={false} // Отключит автовоспроизведение.
showinfo	bool	true	Проигрыватель перед началом воспроизведения НЕ выводит информацию о видео, такую как название и автор видео. Подробнее Пример: showinfo={false} // Установит значине по умолчанию.
rel	bool	true	Этот параметр определяет, будут ли воспроизводиться похожие видео после завершения показа исходного видео. Подробнее Пример: rel={false} // Установит значине по умолчанию.
start	Number	null	Если этот параметр определен, то проигрыватель начинает воспроизведение видео с указанной секунды. Подробнее Пример: start={66}
end	Number	null	Этот параметр определяет время, измеряемое в секундах от начала видео, когда проигрыватель должен остановить воспроизведение видео. Подробнее Пример: end={99}
extraParams	String	null	Возможность указать другие параметры. Список доступных Примеры: extraParams='loop=1' extraParams='controls=0&loop=1' // Два и больше разделять знаком &
webpThumbnail	bool	true	Вывод превью в формате webp для браузеров которые его поддерживает. Важно: В некоторых старых видео и/или с плохим качеством оно может отсутствовать.
customImage	func	undefined	Возможность вставить свое изображение. Пример
className	String	null	Возможность указать доп. класс для корневого блока. Примеры: className='some-class' className={css.someClass}
aspectRatio	String	16:9	Соотношение сторон для корневого блока. Примеры: aspectRation='16:10' aspectRation='18:9.5'
thumbnailSize	String *	oneOf([ ])	Выбор качества превью из доступных на youtube. Принимает одно из заданных значений: 'maxresdefault', 'sddefault', 'hqdefault', 'mqdefault' Пример: thumbnailSize='sddefault' // *Примечание *Примечание: Если заданное изображение не будет найдено, то подставится доступное худшего качества.
buttonAriaLabel	String	Run video	Возможность заменить стандартный текст и при необходимости обернуть в перевод. Пример: buttonAriaLabel={t`Запустить видео`} buttonAriaLabel={i18n`Запустить видео`}

customImage

const image = (onClick, onLoad, className) => (
    <img
        className={className}
        src='https://upload.wikimedia.org/wikipedia/commons/f/ff/Pizigani_1367_Chart_10MB.jpg'
        alt=''
        onClick={onClick}
        onLoad={onLoad}
    />
);

<Youtube
    id='-OHgXJR1r4E'
    customImage={image}
/>