Youtube Videos Responsiv

Webseiten und Videos ...

Egal, welche für Video's man in seine Seite integrieren möchte, ob in eine Html-Seite oder ein CMS, man kann es sich schwer machen ... d.h. man erstellt eigene passende DIV Container und macht das Ganze dann responsive.

Hat man aber jedoch Bootstrap sowieso schon geladen, gestaltet sich das Ganze erheblich einfacher, denn die benötigten Klassen sind in Bootstrap schon enthalten.
Ein Container rum um das Video passend zu platzieren, fertig.

<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

<!-- 4:3 aspect ratio -->
<div class="embed-responsive embed-responsive-4by3">
  <iframe class="embed-responsive-item" src="..."></iframe>
</div>

Fancybox Media Youtube

Wyswyg (Content)

wenn man in der /template/lib/inc_script/frontend_render/fancyBox.php noch das entsprechende Helper Script lädt und in der jquery.fancybox.js die Anweisung einträgt können in der Fancybox auch z.B. Videos angezeigt werden.

Beispiel-Link zu Youtube

Html (Content)

mit passendem Template

Html (Content)

Video Sonnenuntergänge

H1 - Beispielüberschrift

Ein kurzer Text um den Farbkontrast zu test