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
}
Related
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;
I want to see a screen full of embedded video but i am getting black borders on left and right but i have included allow full screen in my coding also.How to remove the borders and see stretched video? I am attaching my code and screen shot .!Screen shot of the borders<iframe id="vid" width="100%" height="100%" src="https://www.youtube.com/embed/RdIh8GiVR9I?autoplay=1&modestbranding=0&controls=0&showinfo=0&rel=0&allowfullscreen=true"></iframe></div>
The answer to this is slightly more complicated.
The "allowfullscreen" is just there for displaying the "fullscreen" button. (Although it's kind of strange)
To make it behave like you want to, have a look at this explanation
(The section with "<iframe>")
Basically, you need to put the video in a div with the full width of the website (what you probably already did) and some css magic to make it the correct height.
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 am not sure whats going wrong but when I am using a flash file in the web page when I am setting size
style="width: 445px; height: 386px"
white strips are embedding sideways automaticaaly,,
while using the same page with size
width="450" height="440"
no white strips appear.
It might be the problem associated with the aspect ratio.
Is there any way to set these white strps to transparent????
or to remove these strips?????
Can we see a link? Or some code? It appears to be an aspect ratio problem because the width and height are definitely a different aspect ratio in your second scenario. Or if the white strips are the flash stage, you can also set wmode to transparent, and the html background will show through.