I never had been working with HTML5 video before. I want to be able to set the video to 100% width and it will remained 100% if the browser size had changed. But, it seems not working properly. I tested it on other browser, most of them looks wrong to me.
I was wondering if you can help me out?
http://www.blackwellautomation.ca
Thanks!
atry this;
HTML
<div class="container">
<video id="thevideo" controls preload="auto">
<source src="thevideofile.mp4" type="video/mp4">
<source src="thevideofile.webm" type="video/webm">
</video>
</div>
CSS
.container video {
height: auto !important;
width: 100% !important;
}
If the video is an embed in an iFrame (YouTube, Vimeo etc.) you will need to adopt a different approach - see: http://www.webdesignerwall.com/tutorials/css-elastic-videos
Related
I have added a video and an audio file to a webpage, however they don't seem to want to center.
The HTML code is:
<h2>Dedicated to Quality</h2>
<video height="210" class="center" controls="controls" poster="aboutus/poster.jpg">
<source src="aboutus/ucorp.mp4" type="video/mp4"/>
Your browser does not support the HTML5 video element.
</video>
<p>
For the audio of this webpage, use the audio controls below.
</p>
<audio class="center" controls="controls">
<source src="aboutus/voiceover.mp3" type:"audio/mp3"/>
Your browser does not support the HTML5 audio element.
</audio>
The CSS code is:
video.center
{
display: block;
margin-left: auto;
margin-right: auto;
}
audio.center
{
display:block;
margin-left:auto;
margin-right:auto;
}
So I have already added the display:block; CSS classes and have the margins set to auto.
According to the tutorial I am following, this should work.
Below I have attached what I am expecting vs. what I am getting (note: disregard the video thumbnails and sizes being different).
Expected Outcome vs Obtained Outcome.
Thanks in advance!
I have some problems on HTML5 video when I make a page not app working on mobile. I want to put some words on video when video plays, but it seems the z-index not working on video. This problem have troubles me a long time, and I have searched on google, stackoverflow and css-tricks, not finding the right answer.
<div id="main_container">
<div id="danmu">小苹果小苹果小苹果</div>
<video id="video" controls="controls">
<source src="mov_bbb.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
#video{width:100%;position: relative;}
#danmu{position: absolute;width: 100%;left:0;top:0;color:red;z-index:10;}
#main_container { float: left; position: fixed; left:0; top:0;width:100%;}
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 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).