I'm using the following snippet to embed a local video in a presentation made with xaringan in rmarkdown:
<video>
<source src="video_name.mp4" type="video/mp4">
</video>
The video works fine, but it runs off the bottom of the slide (i.e., it's too tall), and I cannot get any resizing to stick. I've tried using percentages
<video>
<source src="video_name.mp4" type="video/mp4" height="50%">
</video>
And absolute size
<video>
<source src="video_name.mp4" type="video/mp4" height="100">
</video>
And the video height does not change. What am I doing wrong?
The height argument controls the size of the container, so in this case, that would go into the video tag:
<video width='50%'>
<source src="video_name.mp4" type="video/mp4" >
</video>
I want to know how can i make my embed video is responsive on mobile view?
this is my code for desktop view, but how to make this video fit on mobile view
<div class="embed-responsive embed-responsive-16by9">
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="embed-responsive-item">
<source src="example.mp4" type="video/mp4"/>
</video>
</div>
this is mobile view for the video, i want to make it fit for mobile
i hope you guys can understand what's my problem here. Thank you for answering this question
The best way i have found to make videos responsive on mobile would be to create a 16-9.gif and put that with height 100% and width 100%, then have this set in a container set to relative. Then set the video element to position absolute, left 0 ,right 0, top 0, bottom 0, height:100% and width 100%. This will then take up the entire height of the gif and then scale.
<div class="embed-responsive embed-responsive-16by9"> <-- set relative
<video playsinline="playsinline" autoplay="autoplay" muted="muted" loop="loop" class="embed-responsive-item"> <-- set absolute
<source src="example.mp4" type="video/mp4"/>
</video>
<img src="this will be your gif of 16-9"/> <-- set height and width
</div>
I have the following video tag:
<video width="640" height="480" controls id="mainVideo" name="mainVideo">
<source src="video.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
and I would like to position it on the top right of the browser's screen, irregardless of where the window scroll is (meaning, the video stays on top).
Try this...
#mainVideo{
position:fixed;
right:0;
top:0;
}
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
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).