VideoBlock

Демо данные
const content: IContent = {
    title: 'Интернет',
    description: 'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
    href: '#',
    buttonTitle: 'Подключение',
};
const contentWithoutButton: IContent = {
    title: 'Интернет',
    description:
        'Подключение к домашнему интернету осуществляется в удобное для вас время по технологиям Ethernet, Docsis.',
};
Если в компоненте выбран тип видео 'youtube', то в качество источника необходимо указать id видео:
<VideoBlock videoType='youtube' videoSrc='2Sps5MnvlKM' />

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

<VideoBlock videoSrc={video} />

Базовое использование (без перехода в полноэкранный режим на iOS)

<VideoBlock videoSrc={video} playsinline />

С превью

<VideoBlock videoSrc={video} poster={poster} />

Контент

<VideoBlock content={content} videoSrc={video} />

Текст справа от видео (только для десктопа)

<VideoBlock content={content} videoSrc={video} contentPositionRight />

Без кнопки

<VideoBlock content={contentWithoutButton} videoSrc={video} />

Видео с Youtube

<VideoBlock videoSrc={youtubeVideoId} videoType="youtube" isAutoplay />

C контентом

<VideoBlock content={content} videoSrc={youtubeVideoId} videoType="youtube" />

Видео с Youtube (без перехода в полноэкранный режим на iOS)

<VideoBlock
  videoSrc={youtubeVideoId}
  videoType="youtube"
  isAutoplay
  playsinline
/>

HTML-теги и спецсимволы

В свойстве content в свойствах title и description поддерживаются некоторые HTML-теги: "<br>, <font color>, <a href>".
Также в обоих свойствах поддерживается спецсимвол &nbsp.

Демо данные
const htmlTitle: '<a href="https://moscow.megafon.ru">Текст</a><br><font color="#731982">≈40</font> символов.&nbspКороткие слова',
const htmlDescription = 'Описание&nbspдолжно <a href="https://moscow.megafon.ru">быть</a> <font color="#731982">примерно</font> не более 130 символов.<br>Пишите содержательно, кратно и не будет проблем с текстовым контентом.';

<VideoBlock
  content={{
    title:
      '<a href="https://moscow.megafon.ru">Текст</a><br><font color="#731982">≈40</font> символов.&nbspКороткие слова',
    description:
      'Описание&nbspдолжно <a href="https://moscow.megafon.ru">быть</a> <font color="#731982">примерно</font> не более 130 символов.<br>Пишите <b>содержательно</b>, кратно и не будет проблем с текстовым контентом.',
    href: '#',
    buttonTitle: 'Подключение',
  }}
  videoSrc={youtubeVideoId}
  videoType="youtube"
/>

Фикс для белого фона

<VideoBlock videoSrc={video} fixWhiteVideoBackground />