Wie YouTube-Videos in größerem Format einbetten

Fussel

Hallo,

Ich möchte auf einigen Seiten einer Website mit responsivem Design Videos einbetten, zum Beispiel welche von YouTube.
Die Videos sollen dort dann möglichst in etwas größerem Format zu sehen sein, mit einer Breite zwischen 700 und 800 Pixeln.
Allerdings werden solche auf Mobilgeräten (Tablets, Smartphones) nicht auf die kleinere Displaygröße verkleinert, was sicherlich damit zu tun hat, dass die Codes zum Einbetten Angaben zur Breite und Höhe enthalten, wie in diesem Beispiel:

Code: Alles auswählen

<iframe width="800" height="450" src="https&#58;//www.youtube.com/embed/abc123?rel=0" frameborder="0" allowfullscreen></iframe>

Bilder kann ich problemlos einfügen, selbst wenn sie über 1000 px breit sind. Diese werden automatisch passend verkleinert.
Gibt es für eingebettete Videos vielleicht auch eine Lösungsmöglichkeit? Ich möchte sie halt gerne größer als z.B. nur in 640 px breit einfügen.

Grüße,
Fussel

Melegrian · Zuletzt geändert von Melegrian am 11.09.2015, 15:00, insgesamt 1-mal geändert.

Ich habe frameborder="0" durch class="video" ersetzt.

Code: Alles auswählen

<iframe width="800" height="450" src="https&#58;//www.youtube.com/embed/abc123?rel=0" class="video" allowfullscreen></iframe>

In der style.css dann:

Code: Alles auswählen

/* Allgemein */
iframe.video &#123;border&#58;none&#125;

/* Unter dieser Breite */
@media &#40;max-width&#58;800px&#41; &#123;
    iframe.video &#123;max-width&#58;100%; max-height&#58;100%&#125;
&#125;

Die Breite musst Du Dir selbst ausprobieren.

heinrich

Schau mal dort: https://css-tricks.com/NetMag/FluidWidt ... hVideo.php

Fussel

@Melegrian:
Ich habe das gerade mal so gemacht, wie du es beschrieben hast, und es funktioniert super!

@heinrich:
Wie ich auf der Seite unter dem Link gesehen habe, geht das auch bei Videos von Dailymotion und Vimeo auf diese Weise. Sehr schön, denn solche habe ich auch hier.
Ich habe mir den Link mal abgespeichert.

Vielen Dank euch beiden!