Ranter
Join devRant
Do all the things like
++ or -- rants, post your own rants, comment on others' rants and build your customized dev avatar
Sign Up
Pipeless API
From the creators of devRant, Pipeless lets you power real-time personalized recommendations and activity feeds using a simple API
Learn More
Comments
-
I just had an issue with making iframes responsive... After reading your last few rants it seems like you're really struggling (and going a lot more in depth).
Good luck -
@Stuxnet to make them responsive set it in a videoWapper and set height and width of iframe 100%
-
.videoWrapper {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 0;
max-width:100%;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
videoWrapper img:hover {
-webkit-filter: brightness(75%);
}
.videoWrapper .play {
height: 72px;
width: 72px;
left: 50%;
top: 50%;
margin-left: -36px;
margin-top: -36px;
position: absolute;
background: url("//i.imgur.com/TxzC70f.png") no-repeat;
cursor: pointer;
}
This is how I did it and iframe is inside a div with custom width -
That seems overkill for my situation. I just have <iframe blah blah style="max-width: Xpx;">
Then set the width to the appropriate percentage on the stylesheet.
Used a few media queries to make it the size I wanted for the mobile.
Woke up to see miscroshit is buying GitHub and saw atleast 3~4 rants about
Alright we get it, stop being redundant, I'm dealing with iframes and YouTube iframes with jQuery already
rant