Как добавить видео в css
Перейти к содержимому

Как добавить видео в css

  • автор:

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

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

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

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

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

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

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

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

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

Создадим 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;
>

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

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

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

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

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

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

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

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

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

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

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

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

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

    Copyright © 2010-2024 Русаков Михаил Юрьевич. Все права защищены.

    Адаптивная вёрстка, урок второй. Адаптивное видео на сайте

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

    Тег позволяет воспроизводить видео со сторонних ресурсов, таких как YouTube и Vimeo. Элемент создаёт на странице вложенную область, в которую загружается другая html-страница (при наличии атрибута src ) или любой другой контент. Элемент не должен находиться внутри элемента или . Для элемента доступны глобальные атрибуты, а также собственные:

    Таблица 1. Атрибуты тега

    Атрибут Описание, принимаемое значение
    height Задаёт высоту фрейма в px .
    name Имя встраиваемого контента, не должно начинаться со знака _ и должно содержать больше одного символа.
    sandbox Набор ограничений для страницы, загруженной во фрейм. Если значение атрибута не указано, применяются все ограничения одновременно. Возможные значения:
    allow-forms — разрешает встроенному контенту отправлять формы
    allow-scripts — позволяет запуск скриптов, принадлежащих фрейму, кроме всплывающих окон
    allow-top-navigation — позволяет открывать ссылки, находящиеся внутри фрейма, в родительском окне
    allow-same-origin — позволяет обрабатывать содержимое фрейма как уникальное, отдельно от содержимого родительской страницы.

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

    adaptive-video-page

    1. Адаптивное HTML5 видео

    Когда элемент впервые стал появляться на страницах сайтов, для воспроизведения видео-файлов необходимо было добавлять три файла в форматах .mp4 (для Safari, IE9, iPhone, iPad, Android, и Windows Phone 7), .webm (для Firefox4, Opera, и Chrome) и .ogg/ogv (для старых версий браузеров Firefox и Opera). В настоящее время все современные браузеры поддерживают формат .mp4 .

    Чтобы видео адаптировалось под ширину блока-контейнера с сохранением пропорций, зададим элементу следующие свойства:

    video

    2. Адаптивное видео с YouTube или Vimeo

    Видео с YouTube или Vimeo добавляется на страницу с помощью элемента . Для управления адаптивностью видеоплеера обернём фрейм дополнительным блоком с классом thumb-wrap . Получить код фрейма Vimeo можно по кнопке Share , далее значок тега. На YouTube нужно щёлкнуть правой кнопкой мыши по видео, далее «Копировать HTML-код».

    Видео Vimeo

     

    Видео YouTube

     

    Чтобы сделать адаптивный блок с видео-роликом, который корректно будет отображаться на всех устройствах, воспользуемся следующим приёмом:

    .thumb-wrap < position: relative; padding-bottom: 56.25%; /* задаёт высоту контейнера для 16:9 (если 4:3 — поставьте 75%) */ height: 0; overflow: hidden; >.thumb-wrap iframe

    Вставить видео на сайт

    Нужно вставить видео и справа от него контент. Но когда ставишь display:flex; видео пропадает. Как поставить видео и рядом с ним текст?

    #contact < background: #000322; >#contact .contact-wrapper < display: -webkit-box; display: -ms-flexbox; display: flex; >#contact .contact-wrapper .video-container < padding-bottom: 20%; max-width: 35%; z-index: 100; >#contact .contact-wrapper .video-container iframe < width: 100%; height: 100%; >#contact .contact-wrapper .contact-title
     

    Как заказать?

    Отслеживать

    задан 6 апр 2020 в 22:25

    user378574 user378574

    59 4 4 бронзовых знака

    Задайте высоту для iframe в пикселях

    6 апр 2020 в 22:30

    справа от видео ведь стоит текст, можете подробнее пояснить?

    6 апр 2020 в 22:58

    contact-wrapper — display: flex; video-container — max-width: 100%; width: 100%;

    7 апр 2020 в 11:26

    Премного благодарен за столь полезный ответ с вашей стороны

    7 апр 2020 в 11:29

    Не нужно дублировать вопросы. Если необходимо, внесите в правки в текущий.

    7 апр 2020 в 16:21

    1 ответ 1

    Сортировка: Сброс на вариант по умолчанию

    Короче разбирал я ваш код — по итогу новый написал. свойство flex не надо назначать видео, это для общего контейнера. Так же в ссылке на youtube внутри iframe нужно указывать размер видео, а то не будет работать норм.

    .container < max-width:1180px; margin: 0 auto; >.block < display: flex; padding: 20px; height: 100%; >.video-container < width: 100%; height: 100%; background-color: black; >.text
     
    Lorem ipsum dolor, sit amet consectetur adipisicing elit. Nam iste quod, nisi illum molestias tenetur voluptas facilis quos. Nulla aperiam dignissimos sapiente dicta repudiandae in quo natus ea consequuntur vel! Harum, temporibus odit voluptatum ratione fugit obcaecati facere minus facilis eius necessitatibus dolorem nihil quasi maxime, quae et natus laboriosam repudiandae magni, officia sapiente culpa quibusdam in voluptatem repellendus? Officia. Natus amet expedita impedit vitae. Quibusdam nisi enim inventore debitis fugit autem, beatae mollitia? Animi, harum? Fugiat quo quae voluptates architecto ea inventore nobis libero, reprehenderit, nulla quia aut ipsum. Praesentium delectus quis culpa deserunt commodi ab cumque molestias possimus minima. Deleniti, earum optio nesciunt ab quo ipsam incidunt voluptas rem beatae suscipit exercitationem quisquam est sed? Hic, officia explicabo! Delectus, amet? Natus maxime nostrum eius aspernatur cum deserunt incidunt tenetur est accusamus saepe voluptate autem consequatur distinctio consequuntur harum vel facere molestiae in velit eveniet atque, odio provident. Ex.

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

    Узнайте, как добавить фоновое видео на ваш сайт с помощью HTML и CSS, сделав его более привлекательным и интерактивным.

    Алексей Кодов
    Автор статьи
    2 июня 2023 в 11:26

    Добавление фонового видео на сайт может сделать ваш дизайн более интерактивным и привлекательным для пользователей. В этой статье мы рассмотрим, как добавить фоновое видео на ваш сайт с помощью HTML и CSS.

    1. Подготовка видеофайла

    Прежде всего, вам понадобится видеофайл, который вы хотите использовать в качестве фона. Вам следует оптимизировать видео для веба, чтобы уменьшить его размер и улучшить производительность. Рекомендуется использовать форматы, такие как MP4 или WebM, которые хорошо поддерживаются в веб-браузерах.

    2. Добавление видео на страницу с помощью HTML

    Чтобы добавить видео на вашу веб-страницу, вам нужно использовать тег в HTML. Вот пример кода:

      
    • id : Используйте уникальный идентификатор для обращения к видеофайлу в CSS.
    • autoplay : Указывает, что видео должно начинать воспроизводиться автоматически, как только загружается.
    • muted : Отключает звук воспроизводимого видео.
    • loop : Указывает, что видео должно зацикливаться и начинать сначала после завершения.

    3. Стилизация видео с помощью CSS

    Теперь, когда видео добавлено на вашу страницу, вам нужно применить стили CSS, чтобы разместить его в качестве фона. Вот пример кода:

    #background-video

    • position: fixed : Зафиксируйте видео на месте, чтобы оно оставалось на заднем плане во время прокрутки.
    • top и left : Установите верхний и левый отступы в 0, чтобы видео заполнило всю область экрана.
    • min-width и min-height : Установите ширину и высоту видео как минимум на 100%, чтобы оно полностью покрывало экран.
    • z-index : Установите значение меньше 0, чтобы видео было размещено позади других элементов на странице.
    • object-fit: cover : Заполните видео на всю доступную область, обрезая его, если необходимо.

    Теперь у вас есть фоновое видео на вашем сайте! �� Не забывайте тестировать его на различных устройствах и браузерах, чтобы убедиться, что оно корректно отображается и воспроизводится.

    Спасибо за чтение этой статьи! Если у вас возникнут дополнительные вопросы или вам нужна помощь, не стесняйтесь задавать вопросы в комментариях. Удачи в веб-разработке!

    Добавить комментарий

    Ваш адрес email не будет опубликован. Обязательные поля помечены *