Making Embedded Content Work In A Responsive iFrame

You have an iframe: <iframe src=”https://www.youtube.com/embed/wnJ6LuUFpMo” frameborder=”0″ gesture=”media” allowfullscreen></iframe> It’s not responsible. Put a div around it: <div class=”video-container”> <iframe src=”https://www.youtube.com/embed/wnJ6LuUFpMo” frameborder=”0″ gesture=”media” allowfullscreen></iframe> </iframe> </div> Now format the div by adding this css: .video-container { position: relative; padding-bottom: 56.25%; padding-top: 35px; height: 0; overflow: hidden; } .video-container iframe { position: absolute; top:0; left: 0;… Continue reading Making Embedded Content Work In A Responsive iFrame

Published
Categorized as CSS

How to create an expandable box in CSS

We will create a small box (or button) which will expand when a user hovers over it. This can be helpful when you want to host a lot of content on a small space but don’t want people to scroll or navigate to other places.

Published
Categorized as CSS