I have a bootstrap card. One containing a video, one below that containing text. The card containing the video is written as:
<div class="card video-card">
<div class="card-body">
<video width="100%">
<source src="/request/video/SampleVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
and whilst loading, looks like this:
The problem, is that when the video loads, it increases the height of it's parent container (the boostrap card), subsequently pushing down the text card below it. This causes my layout to overflow as follows:
I assume it is doing this because it needs to maintain its aspect ratio. However, is there any way I can 'stretch' the video instead in order to ensure that it respects the width / height of the bootstrap card?
I'd rather know that the layout will be okay and make the effort to edit the videos at a matching aspect ratio.
Thanks.
HTML5 Video does not have the capability to stretch video to fit the parent container. Link to similar question.
I just realized bootstrap can help it do so. Add the img-fluid class to video as in
<div class="card video-card">
<div class="card-body">
<video class="img-fluid" width="100%">
<source src="/request/video/SampleVideo.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</div>
</div>
Related
How do I link a video (hosted on a server) to an image? I keep getting the first frame of the video instead of a specific image that I want to display. I also need to get the video to play in the right size on multiple devices. At the moment I can set the height and width but this doesn't adapt to mobiles.
Example:
<p><img src="/resources/Pictures/Website%20Pages/Members/Club%20TV/Summer%20Camp%20Nutrition.jpg" border="0" alt=""><br></p>
You can use controls poster property in order to give your video a poster instead of showing the first frame
CSS property object-fit to fill the poster based on width and height of the video
video{
object-fit: inherit;
}
<video width="400px" height=200px" controls poster="https://images.unsplash.com/photo-1590573124389-83f2133e0307?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=500&q=60">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.mp4" type="video/mp4">
<source src="https://media.geeksforgeeks.org/wp-content/uploads/20190616234019/Canvas.move_.ogg" type="video/ogg">
</video>
I was having an issue with an HTML5 video that let me to find that video tag elements have a default size of 300x150, even when no source or size is supplied. Here is a short snippet showing the behaviour.
<video style="background-color: red;">
</video>
<div style="background-color: blue;">
</div>
Fiddle here
I included the divtag with the same CSS, and it is set to 0px by 0px default. I have tested this in Firefox and Chrome. If one axis video element's dimension is changed in the Chrome debugger, the other axis is changed to maintain a 2-1 proportion (this also holds true adding a style setting width: 100%).
Is this behaviour documented anywhere? I wasn't able to find anything on why it occurs and whether it can be controlled. I want to set the default aspect ratio of the video to avoid the element from rescaling when it has neither a source or a poster. I've noticed this occuring during for a single frame after the video is loaded: the poster is hidden but the video content is not yet displayed, resulting in the video rescaling to the default size. I avoid the video from turning white by setting the background-image to match the poster, but because the aspect ratio changes to 2-1 there is a noticeable "blink" during the first frame. Being able to set the default aspect ratio to 16-9 would correct this issue.
You can try either inline styling or css from stylesheet
<video src="video/video.mp4" type="video/mp4" controls poster="video.png" id="styled_video" muted preload="metadata" loop>
Here's a link for reference
http://ronallo.com/blog/styling-html5-video-with-css/
Try this:
<video width="300" height="200" controls><source src="path" type="video/mp4"></video>
You can do it right there in the video tag:
<video width="250" height="250" style="background-color: red;">
</video>
<div style="background-color: blue;">
</div>
I'm developing a bootstrap site for which I want a video banner at the top similar to what Airbnb does. To do that, I'm using bootstrap's embed-responsive classes as shown in the code snippet below.
<div class="container-fluid" class="embed-responsive embed-responsive-16by9">
<div class="row">
<video autoplay muted loop class="embed-responsive-item" id="autovid" width="100%" >
<source src="sample.mp4" type="video/mp4">
</video>
</div>
</div>
That puts the video in my web page but now I want to stretch it across the entire screen. I thought container-fluid and setting the width to 100% would do that but its still only taking up part of the screen. It's also not responding when I shrink the window like its supposed to in Bootstrap. How do I stretch it across the entire screen and get it to be responsive to size changes?
Your primary problem is how you are implementing the width of the video object. When you give it the class attribute of embed-responsive-item you are essentially overriding the width with whatever is in the style sheet, in this case the bootstrap default styles. In any case, you should really shape your web-page via an external style sheet.
You can do this by linking to it via the <link> tag, for example.
<link rel="stylesheet" type="text/css" href="style.css">
Create a file named style.css and insert the following code.
video { width: 100%; }
Now understand that this will not always make the video fill the page. As you know your video tag is inside of a <div> tag. This will only make the video take up the full width of that container. If that container's full width is not the width of the webpage then it will obviously not take up the full width of the page.
I suggest you read more about nesting elements in html here, and the box model here.
So I am using the Typo HTML template to make a website. This template: http://nunforest.com/typo-demo/video/
I want the video to be of 80% of the landing pages' height, so that the nav bar would appear and be about 15% from the bottom of the page. Basically I want the video container to be smaller, not with a 100% height like in the template but 80%. The video should not resize its width but it should constrain the proportion and hide the overflow at the top.
The problem is that even when I edit the file the video resizes itself. Another problem is that the nav bar "catches" and fixes itself to the top of the page when you scroll over it, but because I want to change the height of the landing page, it still catches the top of the page on the spot where it was before the change of height.
Could anyone point out the parts to edit?
Thanks :)
Find and replace the following HTML in your source code.
<video class="" preload="" width="100%" height="80%" poster="http://themepunch.com/revolution/wp-content/uploads/2014/05/video_space_cover.jpg" style="display: block;">
<source src="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.mp4" type="video/mp4">
<source src="http://themepunch.com/revolution/wp-content/uploads/2014/05/among_the_stars.webm" type="video/webm">
</video>
I'm a beginner to HTML and need some help... This thing has been driving me crazy-I want to embed a HTML snippet in my site so that a video plays once without showing the controls... I also wanted it to work on many browsers, and after 2 days of research I achieved the code below (woo-hoo!). The only trouble is that when I put the code in the the snippet in the program, I cannot control its position (I want to put a small image above it and can't get the video behind it...)
Please help me! Can the code be fixed or do you know alternatives? (I don't want to modify the header section or install scripts)
<video wdith="600" height="300" autoplay>
<source src="https://sites.google.com/site/privateforsharingfilesbytt/home/docs/Eng.mp4" type="video/mp4" />
Your browser does not support the video tag.
</video>
screenshot
Thanks!
Here's a quick example to overlay an img on a video:
<div>
<img id="overlay_img" src="http://i.imgur.com/i5Gp6.png" width="150" height="150" />
<video width="560" height="340" controls>
<source src="http://media.html5media.info/video.mp4" type='video/mp4' />
</video>
</div>
JSFiddle Demo
The idea is to place an image using an img tag. Then, I gave the image an id to I can adjust it's positioning in CSS. To have the image actually overlay on top of the video, I did position: absolute which allows me to set the position of the element relative to its' ancestor.
If you would like to move around the image, you will need to specify top, left, bottom, right positioning values.