Лучший способ сделать отзывчивый видеофон размером с обложку на веб-сайте

Я попытался использовать подход mp4 с тегами HTML5 <video>. Кажется, работает отлично, полностью отзывчивый и занимает все доступное пространство, не показывая каких-либо странных черных отступов, как это делает проигрыватель YouTube. За исключением того, что я не могу сделать его всегда центрированным (фон размера обложки). И я не могу найти способ загрузить видео и получить прямую mp4 ссылку. Пробовал загружать в Dropbox и Streamable. Оба имеют свою раздражающую целевую страницу, которая не работает с <video>.

Я отказался от этой <video> идеи и решил использовать плеер Youtube. Который вообще не работает. Вот что у меня есть,

<section class = "hero">
    <iframe frameborder = "0" height = "100%" width = "100%" class = "hero-video" allowfullscreen allow = "autoplay; encrypted-media;"
        src = "https://www.youtube-nocookie.com/embed/1CL_X5O71gk?vq=hd1080&autoplay=1&loop=1&modestbranding=1&showinfo=0&rel=0&iv_load_policy=3&fs=0&controls=0&disablekb=1&controls=0&mute=1&showinfo=0&rel=0&html5=1">
    </iframe>
    <img class = "logo" src = "./assets/logo.png" alt = "logo" title = "logo" />
</section>

и используемый CSS,

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.hero {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
}

Чтобы поиграть с идеями,

https://jsfiddle.net/temurih/xpkoe08j/7/


Второй подход:

При использовании тега <video> мне не удалось центрировать (размер обложки) видео. На мобильных устройствах это выглядит странно.

<section class = "hero">
    <video autoplay muted loop class = "hero-video">
        <source src = "https://player.vimeo.com/external/490883126.hd.mp4?s=ce7a3266505de5d5f8f51cd9c134e21d7b1d21bf&profile_id=175" type = "video/mp4">
        Your browser does not support HTML5 video.
    </video>
    <img class = "logo" src = "./assets/logo.png" alt = "logo" title = "logo" />
</section>

CSS более или менее одинаковый,

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    min-width: 100%;
    min-height: 100%;
    z-index: -1;
}

.hero {
    position: relative;
    text-align: center;
    width: 100%;
    height: 100vh;
    background-image: linear-gradient(rgba(94,88,88,0.5), rgba(94,88,88,0.5));
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
    background-position: center;
    overflow: hidden;
}

Чтобы поиграть с идеями,

https://jsfiddle.net/temurih/xpkoe08j/12/

У вас нет реального контроля над проигрывателем YouTube. Если вы вернетесь к своему тегу видео, вам просто нужно object-fit: cover в вашем CSS.

Brad 14.12.2020 20:08

но тогда как я могу загрузить видео куда-нибудь и получить ссылку mp4?

Hafiz Temuri 14.12.2020 20:10

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

Brad 14.12.2020 20:22

@Брэд, не совсем... Видео, которое я пытаюсь загрузить, похоже на 215MB. А обычные хостинг-провайдеры не позволяют вам загружать ничего, кроме 100MB файла. Я пытался отговорить своего клиента от этого, но им нужно именно это видео. И я не могу найти место, чтобы загрузить mp4 видео и получить прямую ссылку. Можно залить на Youtube, но он плохо работает с отзывчивостью и размером обложки.

Hafiz Temuri 14.12.2020 20:31

Как долго видео? Скорее всего, он все равно закодирован со слишком высоким битрейтом. (Ваши пользователи не захотят загружать фоновое видео размером 215 МБ.) Вы можете перекодировать его в более низкий битрейт с помощью FFmpeg. Честно говоря, я не могу вспомнить ни одного хостинг-провайдера, который ограничивал бы вас ресурсами в 100 МБ. Вы можете разместить его на AWS S3 или Digital Ocean Spaces, если хотите.

Brad 14.12.2020 20:37

Видео длится минуту и ​​имеет очень высокое разрешение. Github для одного останавливает вас на 100MB размере файла, если вы не платите дополнительно.

Hafiz Temuri 14.12.2020 21:54

Почему фоновое видео такого высокого разрешения? Как минимум, вам нужно будет предлагать это с несколькими битрейтами через HLS, потому что целая куча людей не сможет транслировать этот файл достаточно быстро, чтобы воспроизвести его.

Brad 14.12.2020 21:56

@Брэд, чувак! Я сказал им это. Но это то, чего они хотят.

Hafiz Temuri 14.12.2020 22:03

Вам решать интерпретировать требования и реализовывать лучшие компромиссы. Я очень сомневаюсь, что вашему клиенту нужна веб-страница, на которой фоновое видео работает только для 20% людей, которые его видят, и не работает для остальных. Бьюсь об заклад, они хотят видео на фоне как можно более высокого качества для доступного соединения.

Brad 14.12.2020 22:05

@Brad Я смог загрузить его на Vimeo и получить ссылку mp4. Куда вы хотите, чтобы я добавил object-fit недвижимость? Я пробовал везде! jsfiddle.net/temurih/xpkoe08j/11

Hafiz Temuri 14.12.2020 22:53

Видео закреплено слева.

Hafiz Temuri 14.12.2020 22:53
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Введение в CSS
Введение в CSS
CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.
Как выровнять Div по центру?
Как выровнять Div по центру?
Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Ангулярный шаблон для бронирования путешествий
Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...
0
11
522
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

В вашем примере кода просто установите CSS, чтобы установить размер видео равным размеру его родителя. Затем установите object-fit на cover:

.hero-video {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    object-fit: cover;
    width: 100%;
    height: 100%;
}

О, я вижу, не понял, что у меня есть min-width и min-height, которые я добавил, чтобы экспериментировать с разными вещами. Именно то, что я искал, спасибо!

Hafiz Temuri 14.12.2020 23:59

Другие вопросы по теме