Плеер для сайта как на Youtube

ТОП 10 Самые популярные приложения в категории Youtube.

Основные функции :

На данный момент мы работаем над описанием Play Tube YouTube Player

Скачать бесплатно

БЕЗОПАСНОЕ ПРИЛОЖЕНИЕ

Вам нравится Play Tube YouTube Player

Hojamberdi

AndroidList

Пользователи

Разработчики и редакторы контента

Андроид — торговая марка корпорации Google
Все скачивания на AndroidList осуществляются только с официальных сайтов: Google Play, Itunes App Store, Microsoft, поэтому все предоставляемые на нём APK-файлы на 100% безопасные

Источник: www.androidlist-russia.com

Оптимизация сайта: подключение YouTube плеера

В данной записи я вам покажу как правильно прописывать код загрузки видео с YouTube, чтобы достичь наименьшей нагрузки на сайт. Я вам покажу код который позволяет прогружать сначала изображение превью, а затем подгружать сам плеер.

Видео плеер для сайта

Вставка видео в видеоплеер (HTML+CSS)

На этом уроке мы разберем, как вставить видео в кастомном видеоплеере на HTML страницу. В качестве импровизированного видеоплеера, будет использовано изображение Smart TV.

Для работы нам потребуется изображение Smart TV и сам видеоролик. Для эксперимента, вы можете совершенно бесплатно скачать любое видео на сервисе http://www.coverr.co.

Как вставить видео на сайт

Для лучшего понимания, пока вставим видео на сайт без картинки TV. Сделать это очень просто. Для добавления на HTML страницу видео, существует два тега: video и source. Атрибут controls добавляет элементы контроля для встроенного плеера. В разных браузерах встроенные плееры выглядят по разному. Надо иметь ввиду, что большинство браузеров поддерживают формат MP4.

Если подключается только один формат видео, то указываем его сразу в теге video.

Запись ниже предназначена для случая, когда форматов видео несколько.

Создадим flex-контейнер для элементов — секцию с классом smart_tv. Внутри секции поместим два flex-элемента:

• видеоплеер (изображение телевизора)
• видеоролик (тег video с элементами управления controls)

Обнуляем поля и отступы для всех элементов

Сделаем изображение TV адаптивным.

img max-width: 100%;
height: auto;
>

Зададим высоту секции на весь экран, отцентрируем все флекс-элементы.

Плеер для вашего сайта, вместо плеера Ютуб

.smart_tv height: 100vh;
display: flex;
align-items: center;
justify-content: center;
padding: 0 10px;
position: relative;
>

Растянем блок с видеоплеером на всю ширину контейнера. Ограничим максимальную ширину, чтобы видеоплеер не растягивался на всю ширину на больших экранах. Зададим относительное позиционирование, чтобы элементы можно было позиционировать относительно данного блока.

.player width: 100%;
max-width: 800px;
position: relative;
>

На данный момент картинка телевизора и само видео расположены друг под другом. Нужно видео встроить в экран телевизора, подбирая на ходу значения ширины, высоты и двигая видео вверх и влево. Все размеры указываются в процентах, чтобы видеоплеер мог быть адаптивным.

.player video position: absolute;
width: 92.0%;
height: 82.1%;
top: 2.4%;
left: 1.8%;
background: #000;
>

Демонстрация работы видеоплеера

Если Вам интересно узнать, как создать и заработать на собственной веб-студии? Тогда обязательно получите доступ к моей уникальной системе «Своя Web-студия за 55 дней».

Создано 06.04.2020 10:57:13

Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

Если у Вас остались какие-либо вопросы, либо у Вас есть желание высказаться по поводу этой статьи, то Вы можете оставить свой комментарий внизу страницы.

Порекомендуйте эту статью друзьям:

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

1. Кнопка:
   Она выглядит вот так:
2. Текстовая ссылка:
   Она выглядит вот так: Как создать свой сайт
3. BB-код ссылки для форумов (например, можете поставить её в подписи):

Комментарии ( 0 ):

Для добавления комментариев надо войти в систему.
Если Вы ещё не зарегистрированы на сайте, то сначала зарегистрируйтесь.

Источник: myrusakov.ru