VideoBanner

import { VideoBanner } from '@megafon/ui-shared';

Примеры и код
Свойства и методы

Демо данныеconst content: IContent = {
    title: 'Текст ≈40 симовлов. Короткие слова',
    description: 'Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.',
    href: '#',
    buttonTitle: 'Текст в кнопке',
    buttonColor: 'green',
    onButtonClick: () => {},
    textColor: 'black',
    linkTitle: 'Личный кабинет услуги',
    linkUrl: '#',
    cost: 'oт <b>1000 ₽</b> за сообщение',
}
const breadcrumbs = [
    {
        title: 'МегаФон',
        href: '#',
    },
    {
        title: 'Мобильная связь',
        href: '#',
    },
    {
        title: 'Тарифы',
        href: '#',
    },
];

Если в компоненте выбран тип видео 'youtube', то в качестве источника необходимо указать id видео:
<VideoBanner videoType="youtube" videoSrc="2Sps5MnvlKM" />
Если в компоненте не указан источник видео, то необходимо добавить изображения для всех разрешений.
<VideoBanner imageMobile='imageMobile' imageTablet='imageMobile' imageDesktop='imageDesktop' imageDesktopWide='imageDesktop' />

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

На мобильном разрешении отображается только картинка.

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

Контент

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={content}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={content}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

Без кнопки

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={contentWithoutButton}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={contentWithoutButton}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

Только изображение

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
  />
</ContentArea>

Хлебные крошки

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
    breadcrumbs={breadcrumbs}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
    breadcrumbs={breadcrumbs}
  />
</ContentArea>

Видео с youtube

<ContentArea>
  <VideoBanner
    videoType="youtube"
    videoSrc={youtubeVideoId}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="youtube"
    videoSrc={youtubeVideoId}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

Проигрывание видео на мобильном разрешении

<ContentArea>
  <VideoBanner
    videoType="youtube"
    videoSrc={youtubeVideoId}
    videoMobile
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="youtube"
    videoSrc={youtubeVideoId}
    videoMobile
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

Определение цвета текста

На всех разрешениях тёмный цвет текста

<ContentArea>
  <VideoBanner
    imageMobile={images.imageMobile}
    imageTablet={images.imageTablet}
    imageDesktop={images.imageDesktop}
    imageDesktopWide={images.imageDesktopWide}
    content={contentWithDefaultTextColor}
    breadcrumbs={breadcrumbs}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    imageMobile={images.imageMobile}
    imageTablet={images.imageTablet}
    imageDesktop={images.imageDesktop}
    imageDesktopWide={images.imageDesktopWide}
    content={contentWithDefaultTextColor}
    breadcrumbs={breadcrumbs}
  />
</ContentArea>

Светлый цвет текста на мобильном разрешении

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={images.imageTablet}
    imageDesktop={images.imageDesktop}
    imageDesktopWide={images.imageDesktopWide}
    content={contentWithDifferentTextColor}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={images.imageTablet}
    imageDesktop={images.imageDesktop}
    imageDesktopWide={images.imageDesktopWide}
    content={contentWithDifferentTextColor}
  />
</ContentArea>

Цвета кнопок

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
  />
  <br />
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={contentWithPurpleButton}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={content}
  />
  <br />
  <VideoBanner
    imageMobile={imageMobile}
    imageTablet={imageMobile}
    imageDesktop={imageDesktop}
    imageDesktopWide={imageDesktop}
    content={contentWithPurpleButton}
  />
</ContentArea>

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>Пишите содержательно, кратно и не будет проблем с текстовым контентом.';

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={contentWithHtml}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

<ContentArea>
  <VideoBanner
    videoType="video"
    videoSrc={video}
    content={contentWithHtml}
    imageMobile={imageMobile}
    imageTablet={imageMobile}
  />
</ContentArea>

VideoBanner

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

Контент

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Без кнопки

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Только изображение

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Хлебные крошки

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Видео с youtube

Проигрывание видео на мобильном разрешении

Определение цвета текста

На всех разрешениях тёмный цвет текста

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Светлый цвет текста на мобильном разрешении

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Цвета кнопок

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

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

Текст
≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов.
Пишите содержательно, кратно и не будет проблем с текстовым контентом.

1000 ₽

VideoBanner

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

Контент

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Без кнопки

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Только изображение

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Хлебные крошки

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Видео с youtube

Проигрывание видео на мобильном разрешении

Определение цвета текста

На всех разрешениях тёмный цвет текста

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Светлый цвет текста на мобильном разрешении

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Цвета кнопок

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

Текст ≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов. Пишите содержательно, кратко и не будет проблем с текстовым контентом.

1000 ₽

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

Текст≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов.Пишите содержательно, кратно и не будет проблем с текстовым контентом.

1000 ₽

Текст
≈40 символов. Короткие слова

Описание должно быть примерно не более 130 символов.
Пишите содержательно, кратно и не будет проблем с текстовым контентом.