I'm having an issue with HTML5 video, width should be 100% and height 60vh (video needs to be displayed full and not stretched) .
I have tried with position:absolute and padding:56% but seems that doesn't work
<div class="item video-one">
<video id="f-video" class="slide-video slide-media" autoplay="true" loop muted preload="metadata" >
<source src="<?php the_field('video_url_future_living'); ?>?s=8a71ff38f08ec81efe50d35915afd426765a7526&profile_id=112" type="video/mp4" />
</video>
</div>
CSS Case 1 -> Doesn't work because it's cropping the video
.item {
top: 0%;
left: 0%;
height: 100%;
overflow: hidden;
position: absolute;
width: 100vw;
max-width: 100%;
}
.item video {
width: 100%;
height: 100%;
object-fit: cover;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
CSS Case 2 -> Doesn't work, it's full height and it's too much.
.item {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
.item video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
I am trying to display a full width video with an overlay text that sits centered on the video vertically and horizontally. The centered positioning should respond to changes in the viewport width such that it is always centered. Also I would like a "caption" (h2 tag in the example) to always display right below the video regardless to how the viewport is sized.
I have attached my sample code - any help appreciated.
Thanks
Dennis
<head>
<style>
.header-unit {
margin-top: 10px;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 25%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
}
</style>
</head>
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
Please update your css with this and check:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.header-unit {
margin-top: 10px;
height: 100%;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 50%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
i want to make some like this
Unfortunately the video does't show in full height, instead the video is bit out of the screen in height, i cannot even see controls.
I want the video to cover 100% height and width.
My css for this whole component is like this:
.screensaver {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
z-index: 9000;
.logo{
background-image: url(~#/assets/test.svg);
}
&-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.00) 100%);
z-index: 1500;
display: flex;
align-items: center;
padding: $layout-size*1.25 $layout-size;
&-left{
flex: 0 0 320px;
}
}
&-body {
top: 0;
position: absolute;
height: 100vh;
width: 100vw;
&:after{
content:'';
background-color: rgba(0,0,0, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
video{
min-height: 100%;
min-width: 100%;
height: 100vh;
display: block;
}
&-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
}
}
=================
My vue Template:
<template>
<div class="screensaver">
<div class="screensaver-header">
<div class="screensaver-header-left">
<span class="logo">Test</span>
</div>
</div>
<div class="screensaver-body">
<video controls autoplay muted loop>
<source :src="require('test.mp4')" type="video/mp4">
</video>
<div class="screensaver-body-center">
<span>icon</span>
<h2>plz touch to unlock</h2>
</div>
</div>
</div>
Found a solution to this Problem. We can manipulate the Video Object, which can change the video optical but the changes are not big, we can easily use this.
video {
height: 100vh;
width: 100vw;
object-fit: fill;
}
I try to put a video on my website. It should always cover the whole screen. Its no problem if the video gets cut on the sides or the bottom. The most important part of the video is in the top middle.
I've already found a code that works pretty well if you want that the video's center is always visible. But I want the top (and middle) to be visible.
Here is my current code.
.vidwrap {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
height: auto;
width: auto;
display: block;
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
And in this code the top stays visible but its not aligned in the center anymore:
.vidwrap {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: blue;
}
video {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
I am not able to bring these codes together. Can you help me?
Try this:
.vidwrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #00f;
}
video {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
</video>
</div>
For everyone who is looking for the answer. My code seems to work perfectly now (at least it does what I want it to do :D)
This is my code now after nidhi's help
.vidwrap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
Thank you!
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I am trying to introduce a background video to a section of my site.
This section has a defined height of 530px.
However, the images seems too zoomed in.
HTML:
<section class="home-banner">
<video poster="" preload="auto" loop="loop" autoplay="">
<source type="video/webm" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.mp4"></source>
<source type="video/mp4" src="https://a0.muscache.com/airbnb/static/Seoul-P1-4.webm"></source>
</video>
</section>
CSS:
html {
min-height: 100%;
position: relative;
}
body {
margin: 0 0 150px;
}
body, h1, h2, h3, dt, dd {
margin: 0 auto;
padding: 0;
}
.home-banner {
display: block;
height: 530px;
overflow: hidden;
position: relative;
}
.home-banner video {
position: absolute;
left: 50%;
top: 50%;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%);
-ms-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
z-index: 0;
}
I've copied this CSS from a tutorial.
Here's a plunker: http://plnkr.co/edit/Rw4Wr4gWUru9U07ZufLM?p=preview
Remove min-width: 100% and min-height: 100% and add max-width: 100%. Your code will look like this:
.home-banner video {
left: 50%;
max-width: 100%;
position: absolute;
top: 50%;
transform: translate(-50%, -50%);
z-index: 0;
}
Since .home-banner has a fixed width, you will see whitespace above and below the video on a narrow screen. I would suggest changing your .home-banner class to the following (so it will scale with the video):
.home-banner {
display: block;
height: auto;
overflow: hidden;
position: relative;
padding-bottom: 56.7%; /* you can change this to match the width/height proportion of the video */
background: red;
}
try this. set a max-width and max-height
.home-banner video {
max-height: 100%;
max-width: 100%;
}