Как в html вставить видео: Видео на сайте | htmlbook.ru

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

Нужно вставить видео и справа от него контент. Но когда ставишь 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 {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

<section>
        <div>
            <div>
                <div>
                    <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0" frameborder="0"></iframe>
                </div>
                <div>
                    <div>
                        <h3>Как заказать?</h3>
                    </div>
                </div>
            </div>
        </div>
    </section>

• html
• css
• materialize-css

5

Короче разбирал я ваш код — по итогу новый написал. свойство 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 {
  margin: 0 20px;
}

 <div>
  <div>
    <div>
                    <iframe src="//www.youtube.com/embed/Q8TXgCzxEnw?rel=0"></iframe>
    </div>
    <div>
      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.
 </div>
  </div>
</div>

Зарегистрируйтесь или войдите

Регистрация через Google

Регистрация через Facebook

Регистрация через почту

Отправить без регистрации

Необходима, но никому не показывается

Отправить без регистрации

Почта

Необходима, но никому не показывается

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Конкретное руководство по встраиванию видео MP4 в HTML без потери качества

Сегодня все становится все проще, кроме профессиональной работы, такой как вставить видео MP4 в HTML страница в Интернете. Это связано с тем, что у всех веб-браузеров не было единого стандарта для определения встроенных мультимедийных файлов, таких как видео. В этой главе мы продемонстрируем два метода добавления видео на веб-страницы, чтобы каждый мог создавать видео со встроенным HTML как профессионал.

• Часть 1: Как вставить MP4 в HTML
• Часть 2: Часто задаваемые вопросы о встраивании MP4 в HTML

Часть 1: Как вставить MP4 в HTML

Метод 1: как встроить MP4 в HTML с помощью кода

Веб-страницы используют коды HTML для создания структуры. Это похоже на добавление MP4 в HTML со вставкой фотографии. Однако для этого требуется больше элементов управления, таких как воспроизведение, цикл, звук и т. Д. Более того, видео должно увеличиваться и уменьшаться в зависимости от вашего браузера. Следовательно, для этого также требуется внешний документ CSS.

Шаг 1

Сначала создайте документ CSS и введите команду ниже:

.welcome_vid {
Дисплей: блок;
маржа слева: авто;
маржа-право: авто;
ширина: 80%;
высота: авто;
}

Это означает добавление MP4 в центр HTML и создание адаптивного видео. Назовите документ CSS как style.css и поместите его в тот же каталог, что и веб-страница.

Шаг 2

Вставьте документ CSS на веб-страницу, добавив коды на веб-страницу:

Шаг 3

Теперь вставьте MP4 в HTML с приведенными ниже кодами:

Этот браузер не отображает тег видео.

Замените путь с путем или URL-адресом вашей папки с видео и имя с именем вашего файла MP4.

Шаг 4

Сохраните веб-страницу и проверьте, воспроизводится ли видео на веб-странице.

Метод 2: как добавить YouTube MP4 в HTML

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

Шаг 1

Откройте веб-сайт YouTube в браузере и войдите в свою учетную запись. Если у вас его нет, создайте новую учетную запись.

Шаг 2

Нажмите Создавай со значком видеокамеры вверху справа и выберите Загрузить видео. Затем нажмите ВЫБРАТЬ ФАЙЛЫ во всплывающем диалоговом окне и загрузите MP4, который вы хотите вставить в HTML.

Шаг 3

Следуйте инструкциям на экране, чтобы задать описание и другие параметры. Наконец, ударил СПАСТИ кнопку.

Шаг 4

Затем откройте загруженное видео на YouTube, и вы увидите несколько вариантов. Щелкните значок Поделиться значок, и вы получите панель общего доступа. Перейти к встраивать вкладку, скопируйте ссылку в поле и вставьте ее на свою веб-страницу. MP4 добавит в ваш HTML-документ. По умолчанию видео встроено в iframe. Вы также можете изменить код, например размер видео и многое другое.

Примечание: YouTube поддерживает только увеличение видео продолжительностью до 12 часов менее 128 ГБ. Рекомендуемое соотношение сторон — 16: 9.

Рекомендую: лучший конвертер MP4

MP4 — это стандартный видеоформат для распространения анимированного контента через Интернет. Иногда у вас есть просто AVI, MKV или другие видеофайлы без потерь. Они предлагают лучшее качество, чем MP4, но размер файла больше. Лучшее решение — конвертировать ваши видеофайлы в MP4 с помощью Конвертер видео Blu-ray Master Ultimate.

Основные характеристики лучшего конвертера MP4

• * Конвертируйте видео файлы в формат MP4 для добавления в HTML.
• * Производство высококачественных материалов с использованием передовых технологий.
• * Поддержка пакетного преобразования нескольких видео за раз.
• * Предлагаем вам обширные бонусные инструменты, такие как редактирование видео.

Короче говоря, это лучший вариант конвертировать ваши видео файлы в MP4.

Часть 2: Часто задаваемые вопросы о встраивании MP4 в HTML

Как превратить видео в ссылку?

Чтобы преобразовать видео в URL-ссылку, вам понадобится хост-сервис. К счастью, существует множество доступных услуг. YouTube, например, позволяет загружать видео и превращать его в ссылку. Более того, облачные сервисы, такие как Dropbox, тоже обладают такой емкостью.

Какой тег используется для вставки видео в HTML?

В Элемент, который добавляет встроенную поддержку воспроизведения видео в спецификацию HTML в HTML5, может использоваться для встраивания видео в документ HTML.

Как я могу воспроизвести видео при загрузке страницы?

До HTML5 для воспроизведения видео на веб-странице требовался плагин Adobe Flash Player. С появлением HTML5 вы теперь можете размещать видео прямо на самой странице.

Заключение

В этом руководстве описаны два простых способа вставить MP4 в HTML, чтобы вы могли публиковать видео на своей веб-странице. Для новичков вы можете использовать YouTube в качестве хоста и создать ссылку на видео. Однако коды HTML дают вам больше возможностей для управления воспроизведением видео. Если у вас есть другие проблемы, пожалуйста, оставьте сообщение под этим сообщением.

Что вы думаете об этом посте.

• 1
• 2
• 3
• 4
• 5

Прекрасно

Рейтинг: 4.9 / 5 (180 голосов)

Более Чтение

Как конвертировать DAV в MP4 — 3 рабочих метода для конвертации файлов CCTV DAV

Что такое файл DAV? Когда вы записали несколько видео в DAV, как конвертировать DAV в MP4? Просто узнайте больше о 3 рабочих способах из статьи.

2 лучших способа конвертировать M4A в MP4 на Windows и Mac

Если вы хотите конвертировать iTunes M4A в телефон Android или другие устройства, вы можете получить 2 эффективных и простых способа конвертировать M4A в MP4 из статьи.

Как конвертировать файл WLMP в MP4

Вам не удалось открыть файл WLMP на вашем компьютере? Дело в том, что ни один медиаплеер не может его воспроизвести. Вам нужно преобразовать WLMP в MP4. Эта статья расскажет вам 3 способа конвертировать WLMP в MP4.

Как конвертировать файл WLMP в MP4

Вам не удалось открыть файл WLMP на вашем компьютере? Дело в том, что ни один медиаплеер не может его воспроизвести. Вам нужно преобразовать WLMP в MP4. Эта статья расскажет вам 3 способа конвертировать WLMP в MP4.

3 удивительно простых шага для встраивания видео в маркетинг по электронной почте

• Советы и ресурсы

«Можем ли мы отправить видео по электронной почте?» Этот вопрос поднимался много раз на протяжении многих лет, и мы до сих пор слышим его время от времени. В конце концов, видео кажется отличным способом повысить качество обслуживания подписчиков. А вот может ты вообще видео в почту кинул? А вы должны? Это зависит. Это похоже на ответ на все вопросы, связанные с электронной почтой. В электронной почте так много вещей, которые нужно учитывать, что каждый вопрос вызывает еще больше вопросов. Итак, давайте углубимся в плюсы и минусы, как это подделать, как на самом деле встроить настоящее видео в вашу электронную почту, а также некоторые примеры, из которых вы можете черпать вдохновение.

Плюсы и минусы: работают ли электронные письма с видео?

Первый вопрос, который я всегда задаю: «Зачем тебе видео?» Большинство маркетологов согласны с тем, что видео — это мощное средство. Согласно нашему отчету о состоянии электронной почты, 91% потребителей предпочитают интерактивный и визуальный контент традиционным, текстовым или статическим носителям. Тем не менее, менее 17% респондентов State of Email заявили, что использовали интерактивный элемент в своих электронных письмах.

Увеличьте вовлеченность

Люди хотят смотреть видео, что дает силу видео. И даже просто идея видео мощная:

• Включение слова «видео» в строку темы может увеличить открываемость до 19%. (Backlinko)
• Рейтинг кликов увеличился почти на 41%, когда Wistia включила миниатюру видео в свое электронное письмо.
• Вы можете снизить количество отписок с помощью видео на целых 26%. (Campaign Monitor)

Впечатляет.

Но все же, зачем видео включать? Видео может быть эффективным способом:

• Покажите, как работают ваши продукты или услуги
• Придайте лицу или голосу свой бренд
• Удивите и порадуйте свою аудиторию

Какова цель вашего электронного письма? Если вы просто хотите увеличить вовлеченность, видео может вам помочь. Но вы должны убедиться, что видеоконтент, который вы отправляете, интересен вашим подписчикам. И подходит ли этот формат для вашего сообщения?

Тест Wistia проводился с несколькими электронными письмами, и увеличение рейтинга кликов на 40,83% произошло только для одного из их электронных писем. Другие тесты показали значительно меньший прирост по сравнению с электронной почтой без видео.

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

Обратитесь в службу поддержки клиентов электронной почты

К сожалению, поддержка встроенного видео ограничена. Вот как сейчас выглядит поддержка клиентов электронной почты:

*поддерживается с ограничениями

Как видите, видео не поддерживается во многих местах. Лучше всего видео в электронной почте поддерживают iOS, Apple Mail, Samsung Mail и Thunderbird.

Мы тестировали его в Outlook для Mac с разными результатами:

• В настольном почтовом клиенте Outlook 2016 для Mac видео появлялось с элементами управления, но не воспроизводилось, если вы не щелкнули правой кнопкой мыши и не выбрали воспроизведение. Это не интуитивно понятно и может вызвать трения у ваших подписчиков.
• В настольном клиенте Outlook с Office365 на Mac появился резервный вариант.

В настоящее время у нас нет способа настроить Outlook для Mac, но вы можете сделать одно из двух. Вы можете поместить инструкции в изображение постера — изображение, которое вы создаете, чтобы ваши подписчики могли видеть его во время загрузки видео. Или вы можете добавить атрибут autoplay=»autoplay», чтобы видео запускалось автоматически. Но я не рекомендую последний вариант, потому что он навязчив и может вызвать раздражение, особенно у тех, у кого громкость на высоте.

Недавно Outlook.com начал поддерживать видео в электронной почте. Но прежде чем вы будете в восторге, это очень ограниченная поддержка, поскольку они поддерживают электронные письма только с очень определенных URL-адресов, как обнаружил Реми Пармантье. И если по какой-то причине ваше видео поддерживается, опыт будет очень неуклюжим, поскольку они не поддерживают элементы управления или автовоспроизведение. Таким образом, чтобы воспроизвести ваше видео, подписчики должны будут щелкнуть правой кнопкой мыши, а затем нажать «Воспроизвести». Что не идеально.

Обратите внимание на размер видеофайла и хостинг

Еще одна вещь, которую следует учитывать, — это само видео. Размер файла и место его размещения являются основными факторами, которые определяют, будет ли видео воспроизводиться в ваших электронных письмах.

Для вашего видео в электронной почте мы рекомендуем размер файла не более 1 МБ из-за длительного времени загрузки, что мешает вашим подписчикам. Файлы большего размера загружаются дольше и требуют больше тарифных планов ваших подписчиков. Вовлекайте своих подписчиков, сохраняя размер файлов на низком уровне.

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

Вставлять или не вставлять?

Ограниченная поддержка почтового клиента и ограничения видеофайлов — это лишь некоторые из сложностей видео в электронной почте. Из-за этих ограничений…

Мы рекомендуем использовать встроенное видео в качестве прогрессивного улучшения и только в том случае, если у вас есть видео с достаточно небольшим размером файла.

В противном случае используйте статическую миниатюру видео с кнопкой воспроизведения над ней. Или создайте искусственное видео с помощью анимированного GIF или анимированного CSS, которое выглядит так, как будто оно воспроизводится, когда подписчики наводят курсор на миниатюру.

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

Как встроить видео в электронное письмо

Итак, у вас есть видео, вы обдумали все ограничения, связанные с встраиванием видео в электронное письмо, и решили сделать это. Теперь вам просто нужно знать, как это сделать.

1. Создайте и загрузите свой видеофайл

Создайте свое видео и оптимизируйте размер файла, чтобы он не превышал 1 МБ. Затем загрузите его и получите URL-адрес видеофайла. Это понадобится для атрибута src HTML-тега видео.

2. Создайте и загрузите афишу вашего видео

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

3. Настройте HTML-тег видео

В тег HTML-видео необходимо включить следующие важные атрибуты:

• Атрибут src : введите URL-адрес встраиваемого видеофайла.
• Атрибут постера : это изображение, которое будет отображаться при загрузке видео.
• Атрибуты ширины и высоты : Укажите, насколько высоким и широким должно отображаться ваше видео.
• Элементы управления : указывает почтовому клиенту отображать элементы управления для видео. Не все почтовые клиенты поддерживают это, но неплохо включить те, которые поддерживают.

Содержимое между тегами видео — это то, что будет отображаться, если тег видео не поддерживается. Это может быть текст или изображение, но в любом случае мы рекомендуем добавить ссылку на ваше видео, чтобы ваши подписчики все еще могли получать удовольствие от видео.

Вот пример того, как выглядит HTML-тег видео:

<управление видео poster="https://via.placeholder.com/600x300" src="https://example.com/yourvideoname.mp4" >
  
 placeholder.com/600x300" height=”300 />< /а>

 

Вот и все. Серьезно!

Как насчет резервных копий для конкретных клиентов?

Раньше нам приходилось иметь дело с несколькими откатами для конкретных клиентов, когда iOS перестала поддерживать видео в iOS 8 и 9.. Но поскольку мы уже несколько лет назад (поддержка была восстановлена ​​в iOS 10, а самый последний выпуск — iOS 14 — все еще поддерживает видео), вы можете относительно безопасно не включать его.

Если по какой-то причине ваши подписчики все еще используют iOS 8 или 9 (на устройствах до iPhone 6 Plus), вы можете проверить метод Реми Парментье, чтобы настроить таргетинг на эти почтовые клиенты, скрыть тег видео и показать запасной вариант.

Однако вам необходимо добавить резервную копию для Outlook.com (что также происходит для веб-почты Office365, но поскольку видео там не поддерживается, наличие резервной копии ничего не изменит). Чтобы добавить запасной вариант, вы добавляете тег div вокруг тега видео с классом: 9. 0009

<дел>
<управление видео poster="https://via.placeholder.com/600x300" src="https://example.com/yourvideoname.mp4">