Wer Youtube Videos auf seiner Website einbinden möchte kennt das Problem. Das vorgeschlagene Methode eines Videos von Youtube ist die Einbindung über ein iFrame. Dies hat den Vorteil, dass Browser welche das Flash-Format nicht unterstützen das Video über HTML5 Elemente angezeigt bekommen.

Der iFrame vom Video lässt sich jedoch nur mit einigen CSS Anpassungen  dynamisch für alle Auflösungen (auch die mobilen Auflösungen für Smartphones) anpassen. Mit diesen Angaben ist dies jedoch SEO-konform möglich. Das Video wird dabei nach schema.org ausgezeichnet:

<div class="col-lg-5 col-lg-offset-2 col-md-5 col-md-offset-2 col-sm-4" style="max-width:560px;margin:0 auto;margin-top:30px;margin-bottom:30px;">
<div class="shape square-16-9">
<div itemprop="video" itemscope itemtype="https://schema.org/VideoObject">
<h2><span itemprop="name">Überschrift vom Video</span></h2>
<p><meta itemprop="duration" content="T01M21S" /><br />
<meta itemprop="thumbnailURL" content="https://i.ytimg.com/vi/Xfc-kkPDr8g/hqdefault.jpg" /><br />
<meta itemprop="embedURL" content="https://youtube.googleapis.com/v/Xfc-kkPDr8g" /></p>
<div id="schema-videoobject">
    <object width="560" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="https://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="src" value="https://youtube.googleapis.com/v/Xfc-kkPDr8g" /><iframe width="100%" height="100%" src="//www.youtube.com/embed/Xfc-kkPDr8g" frameborder="0" allowfullscreen></iframe></object>
</div>
<p><span itemprop="description">Hier kommt die Beschreibung vom Video!</span>
</div>
</div>
</div>

Diese CSS-Angaben müssen dann im Head der Website definiert werden:

.span3 {
  width:40%;
}

.shape {
    display: inline-block;
    position: relative;
    width:100%;
    margin:0 !important;
    padding:0 !important;
}

.shape:after {
    padding-top: 100%;
    display: block;
    content: '';
}

.shape div {
  position: absolute;
  top: 0; bottom: 0; right: 0; left: 0;
}

.square-16-9:after{
  padding-top: 56%;
}

Mit den genannten Einstellungen wird der iFrame bzw. das Video skaliert. Mit der Größe max-width:560px; wird die maximale Größe vom Video festgelegt.