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;
Related
I have a video playing in the background of my top div. It looks fine when the screen is full size, but when I resize the browser window to see how it will look on smaller screens, the height of the div remains the same, leaving a big empty space between the background video and the next div.
Here is a preview of the site if you'd like to see for yourself, along with the specific code. https://codepen.io/CarlyWysocki/pen/YYaBOd
HTML:
<div class="jumbotron" id="top">
<video autoplay loop>
<source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container text-center">
<h1>Mac Demarco</h1>
<h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
<i class="fa fa-chevron-circle-down"></i>
</div>
</div>
CSS:
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
height: 100%;
overflow: hidden;
position: relative;
}
.container {
position: relative;
}
If it just stays in the center, you can add css media queries resizing appropriately. One could also just use a picture for small screens via media queries.
Using the referenced stack overflow answer:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
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.
I'm trying to maintain a videos aspect ratio in a responsive layout to prevent black edges when the layout changes size. So far, I've set up some media queries, but while re-sizing there are still some points that the video has black edges.
You can see the layout and video here http://smedia.lv/ (the SHOWREEL video).
The video is embedded from Vimeo with an iframe and it has a width and height of 100%. The video container width depends on the screen size and is also defined in %, the height is a fixed value.
How can I keep the aspect ratio of the video, so it doesn't have the black edges?
What you want is fluid width video.
Adding just a few styles to your container (.video) and the iframe will accomplish this.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
/* Adjust the max-width depending on the other styles on your site. */
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
Checkout the example below.
Note:
You can use a media query to setup a breakpoint at which point the video will grow no bigger than 964.71x410.
You will need to update the padding-bottom, .video width, and media query to reflect the correct aspect ratio of your video if it changes.
.video {
height: 410px;
width: 964.71px;
margin: 0 auto;
}
iframe {
width: 100%;
height: 100%;
}
#media(max-width: 1046px) {
.video {
position: relative;
/* 40:17 aspect ratio */
padding-bottom: 42.5%;
height: 0;
width: auto;
}
iframe {
position: absolute;
top: 0;
left: 0;
}
}
<div class="video">
<iframe src="https://player.vimeo.com/video/120261170" width="500" height="213" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
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 a slight issue. I have a video which I would like to adjust to the browser, it shouldn't stretch, but neither should there be any with space visible
HTML:
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
CSS:
#wereldbol {
position: absolute;
bottom: 0px;
right: 0px;
width: 100%;
height: 100%;
z-index: -1;
overflow: hidden;
background-size:cover;
}
background-size: cover; is causing the issue that the video would be off-center, is there any alternative way to cover the browser's full width and height? At the moment width: 100% and height: 100% don't quite fix the issue because it would leave the image to have a white bar on the left and right, eventhough the video scales correctly. Is there any way to fix this issue?
If I understand you correctly, what you are trying to achieve is keep the video’s aspect ratio, but make it adapt to its surroundings without stretching the video out of proportion. Here’s how I do it:
Wrap the video element in a div, like this:
<div class="video-wrapper">
<video src="Wereldbol.mp4" onclick="this.play();" id='wereldbol' preload="auto" ></video>
</div>
Then use the following CSS:
.video-wrapper {
position: relative;
width: 100%;
max-width: 100%;
height: 0;
padding: 56.25% 0 0 0; /* 100%/16*9 = 56.25% = Aspect ratio 16:9 */
overflow: hidden;
border: 0;
}
.video-wrapper video {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
}
EDIT: Here’s a plunker: Adjust the viewport-width to see how it works.
You need to either adjust the CSS to fit the exact aspect-ratio using the "aspect ratio trick" or use something like FitVids.js -- see http://fitvidsjs.com/