I have a question, how can I do so that the inserted video keeps the vertical proportion (so that all the content is seen) and is not displayed with zoom.
<section class="ctn-video">
<video class="video" muted autoplay loop controls >
<source src="./img/LOREAL/Sequence 02_4.mp4" type="video/mp4">
</video>
</section>
I tried changing the width and heigth but it didn't work.
I want that when I watch the video on the desktop it keeps the vertical proportion so all the content is shown
You can use CSS object-fit: contain to ensure all the video is always visible.
Here's a simple example:
* {
margin: 0;
}
section {
/* the dimensions can be anything, just set like this here for demo */
width: 100vw;
height: 100vh;
}
video {
width: 100vw;
height: 100vh;
object-fit: contain;
}
<section class="ctn-video">
<video class="video" muted autoplay loop controls>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
</video>
</section>
Related
I have a <video> tag in my HTML, that looks like this:
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
This video is hosted on Cloudinary, and I'm doing an inline transform with the src to get a specific dimension (w_450,h_350).
The video by itself looks fine, however I have a media query where I shrink the video by 100px in both width and height to fit smaller screen sizes
#media screen and (max-width: 1000px) {
video { width: 350px; height: 250px }
}
And as you can see, the video container has a shadow that overflows past the width and height of the new container size. If I click play on the video, the box shadow persists.
How do I make the box-shadow for the controls fit the actual size of the container?
Rather than applying height width to the tag you should enclose it within a
<div>
<video control>
<source src="[video_url].webm" type="video/webm">
<source src="[video_url].mp4" type="video/mp4">
<p>Your browser does not support this type of video</p>
</video>
</div>
And then apply your css to the
#media screen and (max-width: 1000px)
{
div{ width: 350px; height: 250px }
video{ width: 100%; height: 100% }
}
Is it possible to make background:cover; effect for <video></video> tag and center it?
I tried just like for image but it does not work. I think it's because video tag is not the background of the <div>, but then how to make it work? Or how to do that it would be background video?
<div class="" style="width:90%;
height:300px; border:1px solid red;
background-color:blue; background-size:cover;
margin:0 auto; ">
<video width="100%" style="margin-top:-100px;" controls autoplay loop muted>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
The equivalent property to background-image for video tags is object-fit.
video {
width: 100%;
height: 100%;
object-fit: cover;
}
Note, however, that the property is currently incompatible with IE/Edge.
What is the recommended/best way to set a video tag's width?
<video width="100%" ...></video>
Or using CSS:
video {
width: 100%
}
I would usually go the CSS route 100% of the time, but setting widths in elements like the canvas can be problematic.
Using CSS is better
because it improves code readability
If you are looking for making responsive video element, then you need to wrap video inside a div with width 100%.
Here it goes:
div.video {
max-width:100%;
height:auto;
display:block;
margin:0 auto;
}
.video {
width: /* More than element */;
}
I have tried the both the following link
http://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video_width_height
There is no difference it makes.
1. Inline
<!DOCTYPE html>
<html>
<body>
<video width="100%" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
2. CSS
<!DOCTYPE html>
<html>
<body>
<style> video{width : 100%; }</style>
<video height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</body>
</html>
Better use the css.
It is good to style externally, not inline..
CSS
video {
width:100%;
}
You can use this code to make your video in full screen
video {
width: 100% !important;
height: auto !important;
}
To have a responsive html5 video tag you can go with this simple approach:
html
<video width="640" height="264" data-setup="{}" preload="auto" controls="" class="video-js vjs-default-skin" id="video_1">
<source type="video/mp4" src="video/src.mp4"></source>
<source type="video/webm" src="video/src.webm"></source>
<source type="video/ogg" src="video/src.ogv"></source>
<p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a target="_blank" href="http://videojs.com/html5-video-support/">supports HTML5 video</a></p>
</video>
width and height attributes are a simple aspect ratio. Override these values using css to keep your code as maintainable as possible.
css
video {
height: auto !important;
width: 100% !important;
}
Now your video will resize according to your container width.
You can use Javascript to dynamically set the height to 100% of the window and then center it using a negative left margin based on the ratio of video width to window width.
DEMO
var $video = $('video'),
$window = $(window);
$(window).resize(function(){
var height = $window.height();
$video.css('height', height);
var videoWidth = $video.width(),
windowWidth = $window.width(),
marginLeftAdjust = (windowWidth - videoWidth) / 2;
$video.css({
'height': height,
'marginLeft' : marginLeftAdjust
});
}).resize();
If I understand correctly, this should be as simple as setting the min-height and min-width to 100%. So for example:
#video {
position: fixed;
left: 0;
top: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
This may need to be adjusted for responsiveness.
Check out thisDEMO
I have a video, and I want it to FULL 100% of the width, and 220px of the height
<video controls="controls">
<source src="video/sport.m4v" type="video/mp4" />
<source src="video/sport.ogg" type="video/ogg" />
<source src="video/sport.flv" type="video/flv" />
but the problem when i change the height to 220px also width change as well
video {
width: 100% !important;
height:220px !important;
}
If you literally gave it a width of 100% and a height of 220px your video would likely look very stretched, horizontally. A better idea is to contain the video in a container div that with overflow hidden set that has the dimensions you want. For example:
<div id="container">
<video controls="controls">
<source src="video/sport.m4v" type="video/mp4" />
<source src="video/sport.ogg" type="video/ogg" />
<source src="video/sport.flv" type="video/flv" />
</div>
video{
width: 100%;
}
#container{
width: 100%;
height: 220px;
overflow: hidden;
}
This way, the video will have a normal aspect ratio, but will have the correct width. Then, the containing div just hides whatever part of the video exceeds 220px in height.
Want to show a video in a bootstrap responsive site.
In my CSS file I defined the video tag width to be 100 % of the .span7 box and set the height to auto. Works very well on desktop when I change the width of the browser window. On iPhone it looks very well, too.
Only on iPad the video width is 100 % but height is only about 2 bootstrap rows. That's too small. Why that?
Why is the height so small on iPad in Safari mobile?
This is the trick I use for iPad:
<div class="video">
<canvas width="960" height="540"></canvas>
<video preload="none" width="960" height="540" controls poster="video.jpg">
<source src="video.mp4" type="video/mp4">
<source src="video.webm" type="video/webm">
Your browser does not support the video tag.
</video>
</div>
CSS:
.video {
position: relative;
}
.video video,
.video canvas {
top: 0;
left: 0;
width: 100%;
max-width: 100%;
}
video {
height: 100% !important;
position: absolute;
}
Works like a charm including the preview image (poster).