after read a lot of documents about this solution i can't resolve this problem, i want to show video with full width and custom height such as width='100%' height='100px'
<div class="row">
<div class="video-container">
<video preload="auto" loop="" autoplay="" muted="" width="700px" height="50px">
<source src="/uploads/MDclouds3-sunset.webmhd.webm"
type="video/webm">
<source src="/uploads/MDclouds3-sunset-H.264-for-VP.m4v"
type="video/mp4">
</video>
</div>
</div>
how can i do that? thanks in advance
You need to use 'object-fit' on the video.
Depending on what you need to do, object-fit: fill or object-fit: contain should do the trick:
https://codepen.io/manticorp/pen/jYXGRZ
note, if you want object-fit:cover you'll have to have a container whose dimensions are also width: 100%; height: 100px; and set overflow:hidden; on that.
Add this in your css section:
video {
width: 100% !important;
height: 100px !important;
}
Related
Does anyone know how to position the video content to the top, like "position: top" with background images?I have a video that is 1920x1080px, but the div is currently using 1920x550px. I have tried to search the World Wide Web without any luck.
<video playsinline autoplay muted loop>
<source src="vid/vid_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
Kindly,
Louis
My example moves the video picture position to the top of page.
It won't be obvious that the video picture is at top since the navbar will block the view of it. So in navbar (is <nav id="navbar" ... > setup code), to move it down for testing, add this to the tag setup:
style="top:40px"
example setup:
<nav id="navbar"
class="navbar navbar-expand-lg top-navbar sticky is-sticky"
data-toggle="sticky-onscroll"
style="top:40px">
Then find the div with class="col-12 video-wrapper" and add to its "style" ...
top: -60px
try a setup like this:
<div class="col-12 video-wrapper"
style="background-image:url('vid/still_vid_3.jpg');
background-repeat: no-repeat;
background-size: cover;
background-position: center;
min-height: 550px;
opacity: 0.4;
top:-60px">
<video playsinline="" autoplay="" muted="" loop="" controls="">
<source src="vid/vid_3.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
Thanks for the reply. Unfortunately it didn't work, but I've managed to fix it by setting the height:
<video playsinline autoplay muted loop style="height: 1080px;">
I have been trying to display an image and on hover, a video would start replacing the image, I used Javascript for the hover functions.
I did this using "poster" in the video tag like this:`
<div class="video">
<video id="videotest" poster="images/img.jpg">
<source src="images/bkg.mp4" type="video/mp4"></source>
Can't use videos here.
</video>
</div>
However, I would like the video to be the same size as the image. The video is 1280*720, and the image is 677-611.
I tried to use clip-path to adapt the video but it doesn't work, here is my CSS:
.video {
text-align:center;
margin:0 auto;
height:auto;
clip-path:inset(0 978px 611px 301px);
-webkit-clip-path:inset(0 978px 611px 301px);
}
I tried applying this style to .video, #videotest and source, it still didn't work as expected.
Is it impossible to use clip-path with videos in HTML5? If so, how can I do it, and if not, how can I make it work?
I will explain myself a little more:
I don't want the image to resize, keeping proportions or not, I just would like to cut off, for example, some pixels left and right, so the image in poster is exactly the same size as the video replacing it. Clip-path seemed to correspond to what I was looking for, but I can't get it to work.
Thanks.
Well Here is the code in HTML you add in the video tag poster="transparent.jpg" to call it by css background and preload="none" to make the poster visible then you make sure to add video's extension that works with the browsers in source tag inside the video tag Unfortunately I couldn't finger out extension that works with safari, It could works if you add the video as one extension to your source folder but I never try
.video {
background:transparent url('http://dev.powered-by-haiku.co.uk/jw-html-config/posters/big-buck-bunny-preview.jpg') no-repeat;
background-size: 677px 611px;
text-align:center;
margin: 0 auto;
width: 677px;
height:611px;
}
video {
width: 677px;
height:611px;
object-fit:inherit;
}
<div class="video">
<video controls="true" id="videotest" poster="transparent.jpg" preload="none">
<source src="http://clips.vorwaerts-gmbh.de/VfE_html5.mp4" type="video/mp4"/>
<source src="http://clips.vorwaerts-gmbh.de/VfE.webm" type="video/webm" />
<source src="http://clips.vorwaerts-gmbh.de/VfE.ogv" type="video/ogg" />
</video>
</div>
.svg-clipped-text {
-webkit-clip-path: url(#SVGID_2_);
clip-path: url(#SVGID_2_);
}
<video loop width="100%" height="100%" autoplay class="svg-clipped-text">
<source src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/323909/bouncyballs.mp4" type="video/mp4">
</video>
<div class="demo">
<svg height="0" width="0">
<clipPath id="SVGID_2_">
<path id="SVGID_3_" d="M770.5,483c3.1,12.8-2.2,30.7-11.8,39.7L498,770c-9.5,9.1-27.7,13.4-40.3,9.7L113.2,677.5
c-12.6-3.7-25.4-17.3-28.5-30L0.9,298c-3.1-12.8,2.2-30.7,11.8-39.7L273.4,11C282.9,2,301-2.4,313.6,1.3l344.5,102.1
c12.6,3.7,25.4,17.3,28.5,30L770.5,483z"/>
</clipPath>
</svg>
I have an iframe inside Div in which i want to add video . I have added the URL path for the video correctly but not getting video on the screen neither i am getting any error on the browser console.Here is the HTML for the whole..
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<iframe width="420" height="315" frameborder="0" allowfullscreen style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</iframe>
</div>
Please help me in displaying the video to my website ..Thanks..
You don't need to use iframe here, If you remove the iframe it will work, If you need the iframe from any reason you need to put "src" attribute in the iframe with link to the video.
<div style="position:relative; width: 100%; height: 0; padding-bottom: 56.25%;">
<video id='video-player' autoplay preload='metadata' controls>
<source src="Video/Sapno.MP4" type="video/mp4">
</video>
</div>
Make a separate HTML page (let's say second.html) containing the <video> element and now call that page within the iframe as follows: <iframe src="second.html" ... ></iframe>.
Hope it helps.
<video src="/video/demo.mp4" width="200" height="100" controls>
<p>If you are reading this, it is because your browser does not support the HTML5 video element.</p>
</video>
I want to place an image in front of html video. And here is my code so far:
<style>
video.videos {
background-image: url(image.png);
background-repeat: no-repeat;
z-index:1;
}
</style>
<video id="Video1" class="videos" >
<img src="image.png" align="absmiddle" style="z-index:2;" >
<source src="video1.mp4" type="video/mp4"></source>
Browser does not support HTML5. Video could not be loaded.
</video>
But using z-index does not make it working. I mean, the image still remains behind the video file. Is there a possibility to fix this? Maybe any other way?
Place it outside the video tags and use this style to position it:
top: 100px; left: 100px; z-index: 0; position: absolute;
Naturally, you'll need to adjust values for your specific application. If absolute positioning doesn't work for you, you can always use relative positioning, which can be more flexible. See JSFiddle for an example of positioning an image in front of a video.
What you mean with front of html video?
if it's the image poster, you can use this:
<video width="320" height="240" poster="/images/w3html5.gif" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
I am attempting to display a video in a responsive design such that the scaling borders blend into the background.
I allow the dimensions of the video element to vary within specified bounds. As a result, when the video playing doesn't fill the actual html element, I get the black padding bars around my video.
Using the css background property I have been able to change the color of the bars shown in Chrome, FireFox, and Opera. I cannot figure out how to change the color shown for Internet Explorer or iOS (ipad).
Can anyone help me out with this?
fiddle as requested: http://jsfiddle.net/swaEe/
html:
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
css:
video {
width: 500px;
background: blue;
}
***_ edit _***
This is a better fiddle: http://jsfiddle.net/swaEe/40/
The video playback should stay vertically and horizontally centered in the container. I want the "bars" to be transparent or the same color as the container (red in this case...).
<div style="width:200px; height:600px; background-color:red;">
<video width="100%" height="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
<video width="100%" height="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
I think I've managed to come up with a solution:
The problem is that it seems to be impossible to style these letterboxes cross-browser. So the trick then would be not to have letterboxes, by scaling the video element to the aspect ratio of the video file.
This solution has two potential drawbacks:
it requires Javascript
you need to know the dimensions of the video file and write them into data-attributes
<video data-video-width="320" data-video-height="240" controls>
The reason for this is that the browser does not know the dimensions of the video file until it has started loading it. Most browsers do load a few bytes of the video before it is played, but not all - some older versions of Android wait until the user starts playing the video.
If you do not care about Android 2.3, waiting for the loadedmetadata event to get videoWidth and videoHeight as jaicabs answer does it is the right way.
Take a look at this: run fiddle / fiddle editor
We basically do three things:
calculate the aspect ratio of the video
resize it so that it fits snugly into its container
center it horizontally and vertically within the container
You can now simply set the background-color of the container, and you're done.
I've tested it with iOS 7 on iPhone and iPad, Chrome, Firefox and Safari. No IE testing so far, since I currently don't have my virtual machines handy, but I foresee no problems here for the current IEs.
How about div with css as background? [I'm not familiar with iOS, tasted on IE11]
html:
<div id="container">
<video width="320" height="240" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
CSS:
video {
display: block;
margin-left: auto;
margin-right: auto;
}
#container{
width: 500px;
height: 240px;
background: blue;
}
jsfiddle: http://jsfiddle.net/c9aHf/1/
Solved! Link to the live jsbin: http://jsbin.com/AVOZoXu/9
The edit jsbin to follow the explanation: http://jsbin.com/AVOZoXu/9/edit
I couldn't test it on IE but it should work like a charm.
There is a real problem with iOS. You won't be able to set a background color to the player and the default player size is 150x300 as you can see in Safari Developer Library:
Because the native dimensions of a video are not known until the movie
metadata loads, a default height and width of 150 x 300 is allocated
on devices running iOS if the height or width is not specified.
Currently, the default height and width do not change when the movie
loads, [...]
So, what you have to do to remove the black bars is do change the default size and adapt it to the movie size as soon as you can. And yes, we'll need JavaScript.
// set height and width to native values
function naturalSize() {
var myVideo = document.getElementById('theVideo');
var myContent = document.getElementById('content');
myVideo.height = myVideo.videoHeight;
myVideo.width = myVideo.videoWidth;
//if the video is bigger than the container it'll fit
ratio = myVideo.videoWidth/myVideo.videoHeight;
if(parseInt(myContent.offsetWidth,10)<myVideo.videoWidth){
myVideo.height = myVideo.videoHeight*parseInt(myContent.offsetWidth,10)/myVideo.videoWidth;
myVideo.width=parseInt(myContent.offsetWidth,10);
}
}
// register listener function on metadata load
function myAddListener(){
var myVideo = document.getElementById('theVideo');
myVideo.addEventListener('loadedmetadata', naturalSize, false);
}
window.onload = myAddListener();
And now you'll get a video player size of the video as soon as the meta data loads.
Since the video doesn't have its black bars anymore, I just had to center it as text.
Oh! And you wanted it to be responsive? Check it out, it doesn't matter the width you set to the #content because naturalSize() checks the ratio and the container's width and sets a smaller height for the video than the original, preventing the black bars appearing in original video height with a smaller width.
The width is controlled with the max-width:100%; property so there's no need to change it manually.
#content{
background:blue;
width:50%;
height:auto;
text-align:center;
}
video {
max-width:100%;
vertical-align:top;
}
I know, I know, the video doesn't get resized till you have started playing it, but it's the closest you're gonna get on iOS to do what you want. Anyway, I think it's a great solution, I hope it helps you.
I know some time has already passed since the question was asked, but I also had to implement a workaround for this problem and would like to share.
The problem was similar to OP's, in that the video could be any size or aspect ratio.
If the HTML <video> element is contained within a <div> which specifies no size at all, the container will automatically fit itself around the video and it will have no black "padding".
Knowing this, we can take advantage of the loadedmetadata event: we don't actually need the video's dimensions for any calculations, but we must wait for this data to load so that the container will resize. As soon as that happens, we can adjust the container's position horizontally and/or vertically.
Here's a fiddle tested in IE11:
http://jsfiddle.net/j6Lnz31y/
Source (in case the fiddle ever becomes unavailable):
<div class="whatever-container" style="width:200px; height:600px; background-color:red;">
<div class="video-container">
<video controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
<br />
<div class="whatever-container" style="width:600px; height:200px; background-color:red;">
<div class="video-container">
<video controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
.whatever-container {
position: relative;
}
.video-container {
position: absolute;
opacity: 0;
}
.video-container > video {
position: relative;
width: 100%;
height: 100%;
}
/*
* After the video dimentions have been acquired, its container will have
* resized and we can adjust its position as necessary.
*/
function adjustVideoContainer() {
console.log("video metadata loaded");
var videoContainer = $(this).parent().filter(".video-container");
if (videoContainer.length === 0) {
//abort
console.log(
"adjustVideoContainer() was called but no it wasn't "+
"wrapped in an appropriate container"
);
return;
}
var containerParent = videoContainer.parent();
var parentWidth = containerParent.width(),
parentHeight = containerParent.height(),
containerWidth = videoContainer.width(),
containerHeight = videoContainer.height();
if (containerWidth < parentWidth) {
videoContainer.css(
"left",
(parentWidth - containerWidth) / 2
);
}
if (containerHeight < parentHeight) {
videoContainer.css(
"top",
(parentHeight - containerHeight) / 2
);
}
else {
videoContainer.height("100%");
}
videoContainer.css("opacity", 1);
}
$("video").on("loadedmetadata", adjustVideoContainer);
remove the inline width/height attributes. You want to use CSS to control your layout!
Use the magic keyword 'auto' for your height
Make sure to also use a poster with the same aspect ratio of your video
Here is a fiddle: http://jsfiddle.net/swaEe/13/
video {
width: 500px;
min-width: 200px;
max-width: 100%;
height: auto;
}
Solved with no JS:
<div style="display: table-cell; vertical-align: middle; width:200px; height:600px; background-color:red;">
<video width="100%" style="background-color:red;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
<br />
<div style="width:600px; height:200px; background-color:red;">
<video height="100%" style="background-color:red; display: block; width: auto; margin: 0 auto;" controls>
<source src="http://www.w3schools.com/html/movie.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
Basically, in both cases removing the height or width setting for the video (for the thin div, I removed the height, and for the short one, the width). Then centered the video elements (horizontal with display:block and then the margin trick, vertical with display:table-cell, and there's probably a better way to do that one).