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>
Related
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>
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 have two videos served online, and two behave differently.
"Bunny video" sits on top of the nav, and "Space video" is below, under unidentified black background of the nav (which i didn't set).
What might have caused that? I tried it locally and changing the format to webm - without success.
<video id="background-video" loop autoplay muted>
// "bunny video"
// http://www.sample-videos.com/video/mp4/720/big_buck_bunny_720p_1mb.mp4
// "space video"
// http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1
// I switch those two links here:
<source src="http://www.dropbox.com/s/nqkhiatqe9vxw3w/space-odyssey.mp4?raw=1" type="video/mp4" />
</video>
Demo on codepen: https://codepen.io/RycerzPegaza/pen/KNYXJg
Both videos are behaving the same for me, and both are 1280x720 resolution - however, "Big Buck Bunny" is presented in 16:9 aspect ratio and fills the video frame, whereas the space clip is letterboxed to 16:9 (with black bars baked into the video) because it's presented at a wider aspect ratio.
So, your nav doesn't have a black background - it's actually part of the video. See what I mean?
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.
I embed .mov clips that sometimes are bigger than the place where I show it, so I want to resize the clip. Have tried with width and height but that only changes the area to display it; it does not resize the actual movie.
Is it possible to resize the movie size? If yes, how?
Yes, you need the scale attribute:
<embed src="sample.mov" width="200" height="240" scale="tofit">
There's a full reference for QuickTime video attributes here.
Sometimes the scale attribute doesn't work. It would help to place the embed element in an object element.
<object height="240" width="200"><embed src="sample.mov" height="240" width="200"/></object>
Make sure that the height and width value in the object element is the same as in the embed element.
Good Luck