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;
Related
I am using the following code provided by imgur to try to give my website a full background gif.
<iframe class="imgur-embed" width="100%" height="1080" frameborder="0" src="https://i.imgur.com/eePBC12.gifv#embed"></iframe>
Here is the link to the gif: https://imgur.com/eePBC12
The issue is it creates black boxes around the top and bottom of the background.I just want a full background gif:
Incorrect background
I've tried manipulating the width/height of the image, I couldn't find anything on black boxes while using iframe that resembled my problem so I was hoping I could get help.
Use an ordinary image. .gifv files aren't real images, so you'll have to use the .gif version:
html {
background-image: https://i.imgur.com/eePBC12.gif
}
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.
The webpage is all html. No css. I don't know css. I used this tutorial to take my site designed in photoshop and make it with Dreamweaver.
I just want to simply embed a Youtube video in a specific position on the page. But the only to embed the video is to push down one of the images and put the video beside it. I want the video to be embedded on top of the page layout as if it floats there in front of the image behind it.
As you can tell, I have no idea what I'm doing.
I want the video to be on the page like this site.
Based on the code of the provided site, the video itself is running inside a div. If you don't wish to use css just define the properties directly on the style for the div which will be the container for the video as follows:
<div style="background: url(http://www.dollarshaveclub.com/skin/frontend/dsc-test/dsc-theme/images/video_placeholder.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="537" height="301" src="http://www.youtube.com/embed/ZUG9qYTJMsI?rel=0&autohide=1&autoplay=0" frameborder="0" allowfullscreen></iframe>
</div>
Test it on jsfiddle: Clic here
BTW: Change the background url for your background image file's location, the code for the video (gather it from youtube) and the width and height of the div accordingly to the dimensions of the video in order to customize.
Good luck!
I am trying to put this live video in my public access channels website. This is the embedding that they (att-uverse) sent me. The problem is that it doesn't show the controls, but has white space above the video around the size that the controls should be.
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" scrolling="no" frameborder="0" class="video" style="width: 320px; height: 240px">
I have tried making it a block and changing the positioning, but I can't seem to get rid of the white space. I have gotten the controls to show with the use of expanding the height.
This is the best I could manage:
<iframe src="http://video.discovervideo.com/dvme/play/wm/?video=http://video.discovervideo.com/accounts/boltonct/pub.asx&w=320&h=240&stretch=fit&start=true" width="340px" height="254px" scrolling="auto">
The white space at the top appears to be part of the video content that is being sent to you.
I had to update my Microsoft Silverlight install on my Macbook Pro to get the video to play and once it did it had the video controls at the bottom of the video as you would expect.
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