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}
/>