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%;
}
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'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%;
}
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'm trying to put some simple d3 into an iframe. I want the content of the iframe to scale with the size of the screen.
I'm trying to make this method work: http://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/.
The corresponding jsfiddle is here: http://jsfiddle.net/812y03ot/3/.
HTML
<div class="video-container">
<iframe src="http://mbostock.github.io/d3/talk/20111116/airports.html"
frameborder="no" scrolling="no"></iframe>
</div>
CSS
.video-container {
position: relative;
padding-bottom: 75%;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top:0;
left: 0;
width: 100%;
height: 100%;
}
The content of the iframe does not scale when I reduce the window size.
I do not want the content of the iframe itself to be respond to the reduced window size. I just want it to scale down when the window sized is reduced.
What am I missing here?
Try adapting this. http://jsfiddle.net/oxvkdcfy/
<style>
#wrap { width: 600px; height: 390px; padding: 0; overflow: hidden; }
#frame { width: 800px; height: 520px; border: 1px solid black; }
#frame {
-ms-zoom: 0.75;
-moz-transform: scale(0.75);
-moz-transform-origin: 0 0;
-o-transform: scale(0.75);
-o-transform-origin: 0 0;
-webkit-transform: scale(0.75);
-webkit-transform-origin: 0 0;
}
</style>
i want to center an ovesized fullscreen video.
it works in webkit, but not in firefox.
demo: http://pascha.org/test/
the video-logo should always stay in the vertical/horizontal center, if you have wide browser resolutions > 1300px, like it does in chrome. in firefox though its only centered horizontally.
(for small resolutions it does not matter, i load a different video there.)
anyone knows the magic lines?
code for history purposes (same as in the demo):
<html>
<head>
<style>
body {
padding: 0;
margin: 0;
}
#slider {
height: 100%;
margin: auto;
overflow: hidden;
position: absolute;
top: 0;
width: 100%;
}
.id3 {
background-color: #253061;
z-index: 1;
}
.plane {
height: 100%;
position: absolute;
top: 0;
vertical-align: bottom;
width: 100%;
}
.videoslide {
height: 100%;
overflow: hidden;
position: absolute;
width: 100%;
}
.bgvid {
bottom: 0;
left: 0;
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
right: 0;
top: 0;
z-index: -100;
}
</style>
</head>
<body>
<div id="slider">
<div class="plane id3" rel="3">
<div class="videoslide">
<video autoplay="autoplay" loop class="bgvid">
<source type="video/mp4" src="startseite_5_1251.mp4"></source>
</video>
</div>
<div class="innerplane">
<div class="text" rel=4>
<div class="title">Wir produzieren aufregenden Video Content -</div>
<div class="title subtitle3 bmarg50">Zum Beispiel für den Ryder Cup.</div>
<a class="sliderlink link3" href="#">Projekt ansehen</a>
</div>
</div>
</div>
</div>
</body>
</html>
Try this:
.bgvid {
margin: auto;
min-height: 100%;
min-width: 100%;
position: absolute;
z-index: -100;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}