When my browser window is shrunk the YouTube video in my main div doesn't shrink with the browser. I tried some code I found online that was going to "solve" the problem, but it never turned out well and didn't look good. My biggest problem with it, was that the video never stayed centered as the browser window shrunk.
This is the code from the website:
HTML:
<div class="video-container">
<iframe src="http://www.youtube.com/embed/dFVxGRekRSg" frameborder="0" width="560" height="315"></iframe>
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Question: Does anybody know how I can have an embedded YouTube video be responsive while staying centered (both vertically and horizontally) in the div that it's located in?
Here is my code: http://jsfiddle.net/MyersAN/xk700bng/
I tried with this class
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
and add div element with youtube embedded code
<div class="videowrapper">
<iframe width="560" height="349" src="link" frameborder="0" allowfullscreen></iframe>
</div>
It works, also you should follow this tutorial with demo code.
Related
I am trying to embed a youtube video on bearblog.
My goal is for the video to be variable width (for viewing on phone / computer), and for youtube fullscreen capability to be enabled.
I followed the instructions here https://stackoverflow.com/a/49887085/10792715 and here YouTube iframe embed - full screen
/* Set your aspect ratio */
.video-container {
position: relative;
overflow: hidden;
height: 0;
/* width: 100%; */
padding-bottom: 56.25%; /* creates a 16:9 aspect ratio */
}
.video-container iframe{
position: absolute;
top:0;
left:0;
width: 100%;
height: 100%
}
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-width: 100%;
}
/* And set the max-width of the parent element */
.video-wrap {
width: 100%;
max-width: 600px;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
and I embedded the video as
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"
allowfullscreen></iframe>
</div>
</div>
However, even though the video is variable width, there is no fullscreen capability. It simply says
Full screen is unavailable.
Find out more
I tried all kinds of tricks
allowFullScreen="true"
allowFullScreen="allowFullScreen"
allowFullScreen
allowfullscreen="allowfullscreen"
mozallowfullscreen="mozallowfullscreen"
msallowfullscreen="msallowfullscreen"
oallowfullscreen="oallowfullscreen"
webkitallowfullscreen="webkitallowfullscreen"
but none worked.
PS.
Following the advice of #Marco Aurelio Fernandez Reyes, I checked the console, and this is what I got:
<div class="video-wrap">
<div class="video-container">
<iframe
src="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
title="Some title"></iframe>
</div>
</div>
i.e., the fullscreen commands are just ignored.
This was not a problem of html or css, but rather a problem of bearblog.dev.
The problem was fixed and now fullscreen works correctly.
To begin with - I'm CSS / HTML beginner so something that might be obvious for you - for me is just not :) Would really appreciate your help.
I'm having a problem regarding positioning of the text on responsive YouTube embed.
What I'm trying to accomplish is:
responsive Youtube video that scales well for all resolutions - it works well
text should be placed on top of the Youtube embed - right now it disappears in back
text should be position in the same place in relation to video embed (for all the resolutions) - in my final example text should be placed on right, approx 25% up from the bottom end of the Youtube embed
I want to have access to Youtube embed controls (e.g. pausing on click and so on) so any layer covering youtube embed won't be OK
I would prefer a solution of html/css (without any additional js)
Source that I have is the following:
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
If some of you guys would be able to help with text positioning, I'd really appreciate
Your attempt is super close. We just need to position the .text element absolutely and use some right and bottom properties to align it. In the example below I've used:
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
I've also changed the .text color to white so it's visible, but this could be changed depending on the colors in the video.
.video-container {
position: relative;
padding-bottom: 56.25%;
/* 16:9 */
padding-top: 0px;
/* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.text {
position: absolute;
color: white;
right: 5%;
bottom: 25%;
}
<div class="video-container">
<iframe src="https://www.youtube.com/embed/AqG147-XEWg?wmode=opaque&autoplay=1&loop=1&showinfo=0" frameborder="0"></iframe>
<div class="text">
<h1>
Example text
</h1>
</div>
</div>
How to make the iframe in responsive with full width
iframe {position:absolute;top:0;left:0;width:100%; height:100%;}
iframe, object, embed {
max-width: 100%;
}
This is my code but not working
Note:
If we have used height in pixels(IFRAME Tag) then comes correctly in full width. But not working in responsive
what is the solution?
I think this is what you are looking for. I assume that you are using YouTube so just paste in the embed link where the other link is.
HTML
<div class="videoWrapper">
<!-- Copy & Pasted from YouTube -->
<iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=1" frameborder="0" allowfullscreen></iframe>
</div>
CSS
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I used this guide: https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
I used the same method for my own website and it works great. Hope this helps you out!
So I am using an iFrame in my website to display a video and I put it in a div to allow for resizing on mobile sties and just to make it more responsive etc. However now, if the monitor is small, the content below the iframe is cut off.
Here is the code for the iframe:
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
If anyone can see anything that may cause this behaviour then I would love to know.
Thanks
Edit:
Here is the code for the div that I am trying to scale. The width doesn't change as the page is scaled down and thus the height also does not change.
Any ideas?
<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The issue is that your wrapper div .splash-page .main-wrap is set to position: absolute; and overflow-y: hidden; this doesn't allow the div to grow to fit all your content.
If you change your CSS to include something like this:
.splash-page .main-wrap {
overflow-y: visible;
position: relative;
}
It will allow the div to grow to accommodate all your content.
You also could wrap the whole thing in a media query if you just wanted to target a specific width.
#media all and (min-width: 1001px) {
...
}
Currently you'll also have a duplicating background issue because your using .wsite-background on both a div and your body tag. If you remove this class from your body tag, it should look better.
Your iframe has a fixed with.
Try using width="100%" instead of width="960"
I have responsive background and I want to have a YouTube video over that background(not in full width).
Here I have tried doing it.
http://jsfiddle.net/audetwebdesign/EGgaN/#run
HTML:
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.
The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 320px;
}
http://jsfiddle.net/QRkL9/
More about the above code - http://avexdesigns.com/responsive-youtube-embed/
braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;