YouTube-Videos responsiv einbinden

Wurbelfritzer Sepp (wbcemaster!) on 18.08.2014

Halb so schwer

Videos in ein Responsives Template einbauen ist kein Hexenwerk. Ein klein bisschen HTML und ein Schnippelchen CSS in die Template.css kopieren.

Damit sich der iFrame, den man unter "Einbetten" von YouTube angeboten bekommt, in der Größe anpasst, braucht man zunächst ein Container rundherum:

<div class="responsiveVideo">
[hier kommt der Code von YouTube rein.]
</div>

Dazu braucht man kein Modul, das funktioniert passabel auch mit dem WYSIWYG-Editor in der QuellCOde-Ansicht. Stabilere Verhältnisse schaft das Code2-Modul, das ist abr nur in Ausnahmefällen nötig.

Das CSS dazu, das du am besten irgendwo in die template.css kopierst:

.responsiveVideo {
   position: relative;
   padding-bottom: 56.25%; padding-top: 30px;
   height: 0;
   overflow: hidden;
}

.responsiveVideo iframe,
  .responsiveVideo object,
 .responsiveVideo embed {
   position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

Das CSS einfach ins Template-CSS dazu kopieren. fertig.

CKEditor

Wer will, kann das YouTube-Plugin im CKEditor auch so ändern, dass es das gleich richtig anlegt:

/modules/ckeditor/plugins/youtube, ca Zeile 305:

content = '<div class="responsiveVideo">'+ content +'</div>'; //Das hier einfügen
instance.insertHtml( content ); //vor dem
Und das probieren wir hier gleich mal:

 

 

Back

Comments

27.11.2014

sepp

Na, dann schaun mer mal, ob ajax geht

Kommentar

email address:
Homepage:
URL:
Comment:

Name:

E-Mail (required, not public):

Website:

Kommentar :

Prüfziffer:
10 mal 4  =  Bitte Ergebnis eintragen