I'm working on a responsive site and recently manage to get a vimeo clip to become responsive by using the embed code at http://embedresponsively.com/.
Only problem is that when ever I try to get a div to float next to the embedded iframe the Vimeo movie disappears? And the div wont display next to the iframe within the wrapper neither.
Does someone know how to force a div to display next to (to the right) a iframe without using float or inline-block since that won't work(?) and at the same time keeping the scaling/responsive effect of the vimeo-movie?
Thank you in advance!
HTML:
<body>
<div class="case_wrapper">
<div class="movie_wrapper">
<div class='embed-container'>
<iframe src='http://player.vimeo.com/video/18085160' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen>
</iframe>
</div>
</div>
<div class="movie_info"></div>
</div>
</body>
CSS:
.case_wrapper {
width:1200px;
height:500px;
background:#5340AA;
}
.movie_wrapper {
max-width:860px;
max-height:500px;
}
.movie_info {
width:300px;
height:500px;
margin-left:40px;
background:#53FF00;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
You just need to add width: 100% to .movie_wrapper and then you just add float: left to .movie_info and .movie_wrapper and it will work. The issue why the video was missing when you added float left is because the video didn't had a width, you just had a max-width to it and with float left it didn't get the width (the .movie_wrapper had width: 0 and height: 0), so you need width: 100% so it can spread ( or to have a width) and then just add max-width to it.
Working example here http://jsfiddle.net/ugpdz7qu/
.case_wrapper {
width:1200px;
height:500px;
background:#5340AA;
}
.movie_wrapper {
width: 100%;
max-width:860px;
max-height:500px;
float: left;
}
.movie_info {
width:300px;
height:500px;
margin-left:40px;
background:#53FF00;
float: left;
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 100%;
height: auto;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
I'm trying to embed a video using an iframe but I'm getting some annoying overflow padding that I can't seem to get rid of.
The code at the top is a way of forcing an iframe into a responsive style so that you can view it on mobile.
Basically the 'padding-bottom' code is controlling the aspect ratio of the frame.
I got the code from here:
https://www.smashingmagazine.com/2014/02/making-embedded-content-work-in-responsive-design/
I've checked here: Making responsive iframe and this leaves me with horrible overflow too.
The result is below:
Image displaying overflow issue
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
Changing the padding-bottom: to 56.35% just moves the black overflow line to the bottom of the video instead of the side.
height 100vh will take 100% of viewport and margin:0 and padding:0 remove default properties.
Just add
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%; /* Add this */
height: 100vh; /* Add this */
padding:0px; /* Add this */
margin:0px; /* Add this */
}
.video-container {
position: relative;
}
.video-container iframe {
position: absolute;
top: 0;
left: 0px;
width: 100%;
height: 100vh;
padding:0px;
margin:0px;
}
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I just did this instead. It works - gets around the user agent style sheet that Chrome uses and applies correct styling.
<style type="text/css">
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
border: 0;
overflow: hidden;
}
</style>
<div class="video-container">
<video style="width:100%;" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" controls autoplay type="video/mp4"></video>
</div>
position: relative;
padding-bottom: 56.25%;
padding-top: 0px;
padding-right: 0px;
height: 0;
overflow: hidden;
}
.video-container iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0px;
right: 0px;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<iframe scrolling="no" src="https://06-lvl3-pdl.vimeocdn.com/01/4345/3/96727205/257828362.mp4?expires=1497358367&token=0ef4c2c1316f5f76d532a" frameBorder="0"></iframe>
</div>
I embedded a responsive youtube video with bootstrap.
My aim: keep it's max size width="560" height="315" which is then centered.
How it should be: https://avexdesigns.com/responsive-youtube-embed/
But instead it goes beyond these limits, making the video very blurry.
How it should not be: https://bomengeduld.github.io/mos-man2/
So far I tryed to set max-width & max-height in css, but it only adjusts the width.
What Am I Doing Wrong in this Code? Thank you in advance for clearing this up!
If understood it correctly you want something like this:
#embed {
height: auto;
text-align: center;
background: black;
width: 100%; /* new */
max-width: 560px; /* new */
margin: 0 auto; /* new */
}
.videowrapper {
float: none;
clear: both;
width: 100%;
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
.videowrapper iframe, .videowrapper object, .videowrapper embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
<section id="embed">
<div class="container-fluid videowrapper">
<iframe src="https://www.youtube.com/embed/g42lHnzOeVs" width="560" height="315" frameborder="0" allowfullscreen=""></iframe>
</div>
</section>
Hi, I'm just having problems aligning a div (a video using iframe) on a specific place.
See this image. Example
And this is what just happening
Result
I'm using bootstrap.
Here's my html code
<div class="jumbotron" style="padding-top: 20px;">
<div class="container">
<div class="row">
<!-- Header Content -->
<div class="col-sm-12 text-shadow-area">
<h1>Lorem Ipsum Dolor Sit Amet</h1>
<!-- Video Section -->
<div class="embed-container"><iframe class="frame" src="https://www.youtube.com/embed/5buccFsPJbg?autoplay=0&controls=0&showinfo=0&modestbranding=1&autohide=1&&rel=0&loop=1" frameborder="0" allowfullscreen></iframe></div>
<!--/END Video Section-->
</div>
<!-- /End Header Content -->
</div>
</div>
Here is the css of custom class
.jumbotron {
background: url(../img/bg.jpg) no-repeat;
background-size: cover;
background-position: center center;
position: relative;
min-height: 600px;
margin-bottom:0;
text-align:center;
padding-bottom: 0;
}
.jumbotron:before, #subscribe-bg:before {
position: absolute;
content:" ";
top:0;
left:0;
width:100%;
height:100%;
display: block;
z-index:0;
background-color: rgba(0,0,0,0.3);
}
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
max-width: 50%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 50%;
}
.frame {
border:5px solid #e2574c;
}
I want the video to be at the end of the background image's section like the example.
Not sure why you are setting max-width: 50%; on embed container, I put it on the iframe instead. Here is how I changed the code to have it aligned center bottom:
.embed-container {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin: auto;
width: 100%;
max-width: 50%;
height: 50%;
}
If you set a fixed width on an absolute positioned element, in this case it's max-width: 50%; you can center it by setting left and right to 0 and margin: auto; for left and right sides.
plz try
.embed-container {
position: relative;
/* padding-bottom: 56.25%;*/
height: 0;
/*overflow: hidden;*/
max-width: 50%;
min-height:600px;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute;
bottom: 0;
/*left: 0;
right:0;*/
width: 100%;
/* height: 50%; */
}
I can't manage to get my Google Maps iframe to be centered on the page. I want the iframe to be responsive also. How can I make it responsive and centered? Below is my code.
CSS:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
HTML:
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002" frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
Just use text-align:center; on your div. https://jsfiddle.net/w0et2jz1/
Try the below style:
.video-container {
margin: 0 auto;
width: 560px !important;
}
Hope, it will help you for desktop
Here is my solution. Do have a look and let me know if its still not the way you wanted. Thanks.
CSS:
.video-container {
max-width: 70%;
height: auto;
border: 1px solid black;
margin: auto;
}
iframe {
width: 100%;
height: 50%;
}
For your situation if you need it to be fixed width and height on desktop but then be responsive you would need to add one more wrapping div and set the following css.
.container {
position: relative;
max-width: 560px;
margin: 0 auto;
}
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
height: 100%;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="container">
<div class="video-container">
<iframe src="https://www.google.com/maps/embed?pb=!1m0!3m2!1shr!2shr!4v1472200012915!6m8!1m7!1sF%3A-DjYDCrslZys%2FV79nfhQh6CI%2FAAAAAAAAC4Y%2F_3uT6StsL1YugvYPQXUgUGfAF_jN1MVzgCLIB!2m2!1d45.81664123898513!2d15.8375560739745!3f73.63479769484006!4f-19.58591212686629!5f0.4000000000000002"
frameborder="0" width="560" height="315" allowfullscreen></iframe>
</div>
</div>
This will make the iframe 560px wide and 315px in height on desktops but then scale down nicely on mobile.
Here's a JSFiddle
Sassmeister here
If an element's dimensions are defined using an intrinsic ratio:
Sass:
body,
html,
.Wrapper
{
width:100%;
height: 100%;
}
.VideoContainer
{
position: relative;
max-width: 100%;
height: 0;
overflow: hidden;
&.Sixteen-Nine {
padding-bottom: 56.25%;
}
&.Four-Three {
padding-bottom: 75%;
}
}
.VideoContainer iframe,
.VideoContainer object,
.VideoContainer embed
{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
HTML:
<div class="Wrapper">
<div class="VideoContainer Vimeo Sixteen-Nine">
<iframe src="http://player.vimeo.com/video/109777141?byline=0&portrait=0&badge=0&color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
Is there any way to contain it so that it resizes to the hight of its container?
It will currently resize to the width of its container while maintaining its aspect ratio, however, even with a wrapper that defines an explicit height, it will overspill the container if the width of the wrapper compared to its height is greater than its aspect ratio.
I need to support IE9+ and I don't want to use JavaScript
can you tell me if this is what you had in mind?
.Wrapper
{
display: block;
width: 100%;
}
.VideoContainer
{
position: absolute;
height: 100%;
display: block;
width: 100%;
&.Sixteen-Nine {
padding-bottom: 56.25%;
}
&.Four-Three {
padding-bottom: 75%;
}
}
.VideoContainer div
{
height: 100%;
}
.VideoContainer div iframe{
height: 100%;
width: 100%;
}
<div class="Wrapper">
<div class="VideoContainer Vimeo Sixteen-Nine">
<div>
<iframe src="http://player.vimeo.com/video/109777141?byline=0&portrait=0&badge=0&color=090909" class="js-only" frameborder="0" webkitallowfullscreen="" mozallowfullscreen="" allowfullscreen=""></iframe>
</div>
</div>
</div>