@evo/youtube NPM

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	Проигрыватель перед началом воспроизведения НЕ выводит информацию о видео, такую как название и автор видео. Подробнее Пример: `bashowinfo={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}
/>

youtube defer lazy

@infinitebrahmanuniverse/nolb-_evo @everything-registry/sub-chunk-303

0.0.6

5 years ago

0.0.4

5 years ago

0.0.3

5 years ago