css 响应iframes vzw。 YouTube视频

Posted 2021-05-13

<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
--------------------------------------


A [Pen](http://codepen.io/vladimir-simovic/pen/ALvBzq) by [Vlad](http://codepen.io/vladimir-simovic) on [CodePen](http://codepen.io/).

[License](http://codepen.io/vladimir-simovic/pen/ALvBzq/license).

.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%;}