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.
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'm trying to pass the last few items on the FCC test suite before I submit my responsive project and I have two that I'm getting errors on when I should not- I understand test suites much better than before, but can't figure these two out.
I can watch an embedded product video with id="video".
AssertionError: #video should be an or element
The #video element IS a video so I'm not sure why this is still catching.
<video id="video" autoplay loop src="http://res.cloudinary.com/mpauldesigns/video/upload/v1532013100/photo_collage.mp4" type="video/mp4">
<p>Your browser doesn't support mp4 video</p>
</video>
The navbar should always be at the top of the viewport.
AssertionError: #header or one of its children should be at the top of the viewport even after scrolling: expected 299.9624938964844 to be close to 0 +/- 15
I made sure the navbar is a child of the header, is sticky, and right near the top so I don't know where it's pulling 300 from!
Here's my project:
https://codepen.io/mpauldesigns/pen/LrqBOQ
What am I missing? Thanks for the assist.
you can use video
<iframe id="video" src="https://www.youtube.com/embed/RDNw8KC0j_M" frameborder="0"></iframe>
and secound thing
In the header, you can add a position at fixed
#header{
position:fixed;
top:0px;}
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>
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 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