Я попытался использовать подход 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;
}
Чтобы поиграть с идеями,
но тогда как я могу загрузить видео куда-нибудь и получить ссылку mp4
?
Точно так же, как и любые другие файлы, связанные с вашим сайтом.
@Брэд, не совсем... Видео, которое я пытаюсь загрузить, похоже на 215MB
. А обычные хостинг-провайдеры не позволяют вам загружать ничего, кроме 100MB
файла. Я пытался отговорить своего клиента от этого, но им нужно именно это видео. И я не могу найти место, чтобы загрузить mp4
видео и получить прямую ссылку. Можно залить на Youtube, но он плохо работает с отзывчивостью и размером обложки.
Как долго видео? Скорее всего, он все равно закодирован со слишком высоким битрейтом. (Ваши пользователи не захотят загружать фоновое видео размером 215 МБ.) Вы можете перекодировать его в более низкий битрейт с помощью FFmpeg. Честно говоря, я не могу вспомнить ни одного хостинг-провайдера, который ограничивал бы вас ресурсами в 100 МБ. Вы можете разместить его на AWS S3 или Digital Ocean Spaces, если хотите.
Видео длится минуту и имеет очень высокое разрешение. Github для одного останавливает вас на 100MB
размере файла, если вы не платите дополнительно.
Почему фоновое видео такого высокого разрешения? Как минимум, вам нужно будет предлагать это с несколькими битрейтами через HLS, потому что целая куча людей не сможет транслировать этот файл достаточно быстро, чтобы воспроизвести его.
@Брэд, чувак! Я сказал им это. Но это то, чего они хотят.
Вам решать интерпретировать требования и реализовывать лучшие компромиссы. Я очень сомневаюсь, что вашему клиенту нужна веб-страница, на которой фоновое видео работает только для 20% людей, которые его видят, и не работает для остальных. Бьюсь об заклад, они хотят видео на фоне как можно более высокого качества для доступного соединения.
@Brad Я смог загрузить его на Vimeo и получить ссылку mp4
. Куда вы хотите, чтобы я добавил object-fit
недвижимость? Я пробовал везде! jsfiddle.net/temurih/xpkoe08j/11
Видео закреплено слева.
В вашем примере кода просто установите 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
, которые я добавил, чтобы экспериментировать с разными вещами. Именно то, что я искал, спасибо!
У вас нет реального контроля над проигрывателем YouTube. Если вы вернетесь к своему тегу видео, вам просто нужно
object-fit: cover
в вашем CSS.