Responsive iframes vzw. YouTube-Videos

index.html

<h1>Nich-responsive Einbindung</h1>
<div title="Kampf gegen ein Nazgûl im Westen von Gondor. Aufgenommen in Herr der Ringe Online.">
  <iframe width="530" height="298" src="https://www.youtube.com/embed/KdI7EQsmlJs" frameborder="0" allowfullscreen></iframe>
</div>

<h1>Responsive Einbindung</h1>
<div class="video-block" title="Kampf gegen ein Nazgûl im Westen von Gondor. Aufgenommen in Herr der Ringe Online.">
  <iframe width="530" height="298" src="https://www.youtube.com/embed/KdI7EQsmlJs" frameborder="0" allowfullscreen></iframe>
</div>

responsive-iframes-vzw-youtube-videos.markdown

Responsive iframes vzw. YouTube-Videos

A Pen by Vlad on CodePen.

License.

style.css

.video-block {
  position: relative; 
  padding-bottom: 56.25%; /* 16:9 */
  height: 0; 
  overflow: hidden; 
  width: 100%; height: auto;}

.video-block iframe {
  position: absolute; 
  top: 0; left: 0; 
  width: 100%; height: 100%;}