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
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 want to embed a non-square Youtube video as a square in my website.
Setting width="" and height="" on the iframe works to make the player square. However, the video inside the is not square: there are black bars at the top and bottom.
Is there any way to make the player 'zoom in' and play the video as square?
<iframe width="200" height="200" src="https://www.youtube.com/embed/8nt3edWLgIg?autoplay=0&playsinline=1&showinfo=0&modestbranding=1" allow="encrypted-media"></iframe>
PS: embedding doesn't seem to work in stackoverflow snippets, so here's a jsbin link:
https://jsbin.com/felosadewi/edit?html,output
I have managed to get a pure css solution to your show the video clipped to fit in a 1:1 box.
https://jsbin.com/woralocoti/edit?html,output
I have dont it by putting the video in a fixed aspect box (16:9) using padding-bottom:56%; (16/9).
And then centering that box in a 1:1 box with overflow:hidden;
The controls are longer than my video here is my code. it's pretty simple
[video width="240" height="135" mp4="http://www.petersecord2014.ca/wp-content/uploads/2014/10/PeterSecordMayoraltyKick-off-Speech23July2014.mp4"][/video]
Things that I have already tried from what I have read online so far :
added control after height (no change)
made height blank (no video
because height was blank)
Try using percentages instead of px for one of your dimensions (most likely height).
I'm trying to embed a pdf document in html code, and I tried three different approaches, which actually gave me the same result:
<embed src="files/cv_aaragon_en.pdf" width="100%" height="100%">
<object data="files/cv_aaragon_en.pdf" type="application/pdf" width="100%" height="100%">
<p>It appears you don't have a PDF plugin for this browser.
No problem, you can still download the PDF file.</p>
</object>
<iframe src="files/cv_aaragon_en.pdf" width="100%" height="100%">
shown in the figure:
Now I have the following questions:
The frames do not use the entire width of the page (which I believe is normal), because there is a lot of white space to both sides of the gray areas. This doesn't bother me.
If the definition is set to width="100%", why is it not taking the full width? Why are there gray regions? This bothers me because the pdf should be larger so that it becomes readable.
I could change the width, but I don't want to hard code its value so that the page looks good regardless of the device. Is there a way to obtain the actual width and put it in that width definition?
The same with the height, I need it to be much larger, but I don't want to hard-code its value. How is this done?
And finally, given the three approaches above, which one is the best in terms of loading speed?
Thank you.
You can try adding a style tag:
<iframe style="position: absolute; height: 100%" src= "files/cv_aaragon_en.pdf" />
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.