On many places I found this code to make a video responsible, but it doesn't work for me.
<div id='wrapp'>
<iframe id='player' src="//www.youtube.com/embed/VWSL2SykovA?rel=0"></iframe>
</div>
css
#wrapp {
position: relative;
padding-bottom:75%; // video is 4:3 aspect ratio
padding-top: 25px;
height: 0;
width:70%;
margin:15px auto;
z-index:2;
border:medium ridge #b30000;
border-radius:9px;
}
#player{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
video, i.e. iframe is too tall.
Here is the FIDDLE
Your proportions seems to be faultives.
Try that css settings proposed by Zurb Foundation
#wrapp {
height: 0;
margin-bottom: 16px;
margin-left: 30px;
overflow: hidden;
padding-bottom: 67.5%;
padding-top: 25px;
position: relative;
}
#player {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
jsFiddled here
Here's a screen capture of nhZBV/4
If you apply box-sizing: border-box; it works fine!
Check out updated fiddle: http://jsfiddle.net/nhZBV/2/
This worked for me:
#wrapp {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
}
Example:
http://jsfiddle.net/nhZBV/3/
Related
I am trying to place a video on my page, which has to be responsive (16:9 all the time). I found a lot of examples, which are basically the same (applying 56.25% padding at the bottom). However, as soon as I apply a max-height and max-width to the iframe (because I don't want it to fill out the entire page), the content underneath starts to move away (because of the padding).
https://jsfiddle.net/12npu2zu/
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
Is there a way to keep it from doing that? The maximum width is 1000px and the maximum height is 563px (16:9).
Is this what are you looking for, i just wrapped all this in one more div and added same style.
<div class="video-holder">
<div id="video-container">
<iframe width="1000" height="563" src="https://www.youtube.com/embed/U4oB28ksiIo" frameborder="0" allowfullscreen> </iframe>
</div>
<p>This should stay right underneath the video</p>
</div>
CSS:
#video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
margin: 0 auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
.video-holder{
display: inline-block;
width: 100%;
height: 100%;
max-width: 1000px;
max-height: 563px;
}
https://jsfiddle.net/326w5jqj/
So what I ended up doing was placing a transparent image in the container. Then I applied this CSS to all the items:
#video-container {
position: relative;
width: 100%;
max-width: 1000px;
margin: 0 auto;
}
img {
display: block;
opacity: 0;
width: 100%;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0 none;
}
See it yourself: https://jsfiddle.net/12npu2zu/2/
I have an iframe with the following css:
.preview-iframe {
width: 100%;
height: 100%;
border: 0;
max-width: 1280px;
max-height: 720px;
margin: auto;
}
It lives inside a container with the following CSS:
.wrapper {
position: absolute;
width: calc(100% - 440px);
height: 0;
left: 0;
top: 0;
bottom: 0;
text-align: center;
background: #1c1c1c;
display: flex;
padding-bottom: 56.25%;
}
the wrapper lives inside a div with
position: fixed
I'm trying to maintain an aspect ratio of 16:9 for the iframe as the window resizes, but the above is not working. What should I do?
<div class="wrapper">
<iframe class="preview-iframe"> ... </iframe>
</div>
.wrapper {
position: relative;
height: 0;
padding-bottom: 56.25%;
}
.preview-iframe {
position: absolute;
top: 0; left: 0;
width: 100%;
height: 100%;
}
This is now possible with the new aspect-ratio CSS property:
.element {
width: 100px;
aspect-ratio: 2 / 1;
/* height will automatically be set to 50px */
}
More info here: https://css-tricks.com/almanac/properties/a/aspect-ratio/
It's available in all modern browsers.
In IE9 This Page element section#tcs-website-content shows 990px width with CSS width: 100% where all parent elements have width of 100% thus having browser width which is 1024px
I have no experience with IE9 whatsoever, so I don't know what is the problem I need to look at.
CSS (LESS) for the elements:
html, body {
margin: 0;
padding: 0;
max-height: 100%;
min-height: 100%;
height: 100%;
width: 100%;
min-width: 100%;
max-width: 100%;
position: relative;
background: none;
font-family: 'muliregular','oswaldregular',Arial;
}
#viewport {
display: none;
position: relative;
float: left;
width: 100%;
height: 100%;
overflow-y: hidden;
background: none;
}
#tcs-website-content {
position: absolute;
z-index: 100;
top: 120px;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
overflow-y: auto;
#bundle .box-sizing();
& .inner-content {
width: 960px;
margin: 0 auto;
}
}
If you want to be sure it covers the whole width, I would add the following definition to #tcs-website-content:
right: 0;
I was looking the way to create image view as have Facebook or Google Plus but i can't put the image at middle of div.
This is my code:
.overflow {
background-color: rgba(0,0,0,.9);
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
.overflow .left-img-box,.overflow .right-content-box {
display: inline;
height: 100%;
}
.overflow .left-img-box {
display: block;
left: 0;
margin: auto;
position: absolute;
text-align: center;
top: 0;
vertical-align: middle;
width: 70%;
}
.overflow .right-content-box {
background: #fff;
position: absolute;
right: 0;
top: 0;
width: 30%;
}
.overflow .left-img-box img {
margin: auto;
max-height: 100%;
}
You can see the example: http://fiddle.jshell.net/N6md8/5/
You can do something css like:
img {
margin:auto;
position:absolute;
top:0;
left:0;
bottom:0;
right:0;
max-height:100%;
max-width:100%;}
reference: http://codepen.io/shshaw/full/gEiDt
I beleive you can go with position:fixed as well :)
I'm attempting to have an overlay of an image. I've done it a bit before but for some reason today I'm obviously forgetting something. It seems to take the width of the entire page and not its parent:
#work_item {
position: relative;
width: auto;
}
#work_item img {}
#work_item a {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 30;
height: 100%;
width: 100%;
background: #000;
color: #FFF;
}
<div id='work_item'>
<img src="" />
Click Here!
</div>
Any Help?
#work_item {
display: inline-block;
position: relative;
left: 0px;
top: 0px;
z-index: 1;
height: auto;
width: auto;
}
#work_item img {
position: relative;
z-index: 1;
left: 0px;
top: 0px;
}
#work_item a {
display: block;
position: absolute;
top: 0px;
left: 0px;
z-index: 30;
height: 100%;
width: 100%;
background: rgba(0,0,0,0.8);
color: #FFF;
}
<div id='work_item'>
<img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQfMwj05-cLtN4hGPTSKJcsElDOeNTW65rlmQKXzRo5ZCbFmvuY0dccZMU" />
Click Here!
</div>
Demo: http://jsfiddle.net/38v3h/
Add this code, if you meant the #work_item:
#work_item {
position: relative;
width: auto;
display: inline-block;
}
Fiddle: http://jsfiddle.net/CRY3g/
div is a block element which occupy the whole width of the its parent regardless of the width of its content. There are many ways to make the div #work_item to wrap the content.
display inline-block;
#work_item {
position: relative;
width: auto;
display inline-block;
}
you can also float the div:
#work_item {
position: relative;
width: auto;
float: left;
}