Permalink
Browse files

Make embedded iframes responsive

The code you copy from YouTube or Slideshare to embed video/slides into your website has a fixed height and width which means when included on the page it shrinks everything else to allow the embedded item to be displayed full width.

This change adds some CSS to handle these embedded items and removes the fixed heights and widths.
  • Loading branch information...
annashipman committed Jun 24, 2016
1 parent b144e8e commit a66e09868d39c8d2ff6101bcbb2326075feeeffe
@@ -40,4 +40,6 @@ The format of Ignite talks is a good constraint to encourage creativity and I re
When it was finished I'd made quite a few mistakes and missed out things I'd wanted to say, but on balance, I think it went pretty well. Judge for yourself.
<iframe width="560" height="315" src="//www.youtube.com/embed/Q1qWzz6liK0" frameborder="0" allowfullscreen></iframe>
<div class="embedded">
<iframe src="//www.youtube.com/embed/Q1qWzz6liK0" frameborder="0" allowfullscreen></iframe>
</div>
@@ -7,5 +7,6 @@ layout: blog_post
I gave a keynote at Velocity EU about the work I've been doing on a PaaS for
government.
<iframe width="560" height="315" src="https://www.youtube.com/embed/OLOaq-Xf5zU"
frameborder="0" allowfullscreen></iframe>
<div class="embedded">
<iframe src="https://www.youtube.com/embed/OLOaq-Xf5zU" frameborder="0" allowfullscreen></iframe>
</div>
@@ -12,15 +12,11 @@ them!
Video to follow...
<iframe src="//www.slideshare.net/slideshow/embed_code/key/39M8UxzdHZYV1e"
width="425" height="355" frameborder="0" marginwidth="0" marginheight="0"
scrolling="no" style="border:1px solid #CCC; border-width:1px;
margin-bottom:5px; max-width: 100%;" allowfullscreen> </iframe> <div
style="margin-bottom:5px"> <strong> <a
href="//www.slideshare.net/annashipman/operations-a-developers-guide"
title="Operations: a developer&#x27;s guide" target="_blank">Operations: a
developer&#x27;s guide</a> </strong> from <strong><a
href="//www.slideshare.net/annashipman" target="_blank">annashipman</a></strong>
<div class="embedded">
<iframe src="//www.slideshare.net/slideshow/embed_code/key/39M8UxzdHZYV1e" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC; border-width:1px; margin-bottom:5px; max-width: 100%;" allowfullscreen>
</iframe>
<div style="margin-bottom:5px"> <strong> <a href="//www.slideshare.net/annashipman/operations-a-developers-guide" title="Operations: a developer&#x27;s guide" target="_blank">Operations: a developer&#x27;s guide</a> </strong> from <strong><a href="//www.slideshare.net/annashipman" target="_blank">annashipman</a></strong>
</div>
</div>
## Links
@@ -6,7 +6,8 @@ layout: blog_post
Video from my FFconf talk *Operations: a developer's guide*.
<iframe width="560" height="315" src="https://www.youtube.com/embed/y6hbrS3DheU"
frameborder="0" allowfullscreen></iframe>
<div class="embedded">
<iframe src="https://www.youtube.com/embed/y6hbrS3DheU" frameborder="0" allowfullscreen></iframe>
</div>
[Slides and links in previous post](/jfdi/slides-from-ops-a-devs-guide.html).
@@ -159,3 +159,19 @@ p .pretty-code-sample {
.message-container {
margin: 50px;
}
.embedded {
position:relative;
padding-bottom:56.25%;
padding-top:30px;
height:0;
overflow:hidden;
}
.embedded iframe, .embedded object, .embedded embed {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}

0 comments on commit a66e098

Please sign in to comment.