Mittlerweile gibt es keine Seite mehr, die nicht responsive ist, sprich sich an das Display des Endgerätes anpasst um ein optimales Benutzererlebnis zu gewährleisten, nur leider verwenden noch viele Portale wie Youtube und Vimeo iFrames um ihre Inhalte auf anderen Seiten einzubetten. Mit einem kleinen Css Trick lässt sich der Inhalt aber gewünscht anpassen.

Die Anleitung wird anhand eines YouTube Videos durchgeführt, denn ich denke, dass dieser Inhalt sehr häufig genutzt wird.

Diesen Code mit dem Youtubevideolink als HTML-Sourcode in euren Artikel eintragen, dazu entweder den Button Sourcode anzeigen, oder den Editor ausschalten.

<div class="responsive">
    <iframe width="420" height="315" src="http://www.youtube.com/....." frameborder="0" allowfullscreen></iframe>
</div>

Im Custom.css eures Templates diesen Code einfügen CSS:

.responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Fertig, nun werden eure Inhalte mit der angegebenen Größe angezeigt, außer der Bildschirm ist zu klein, dann wird der Inhalt auf die Breite des Bildschirmes skaliert.

Der Artikel stellt meine freie Meinung dar und ich habe weder eine Bezahlung noch eine andere Form der Gegenleistung für das erstellen dieses Artikels bekommen.

Ist diese Seite hilfreich?
Dann finde HIER heraus, wie du dieses Projekt unterstützen kannst!
Durch deine Unterstützung kann dieses Projekt erhalten und weiter ausgebaut werden.
Stefan J. Trucker
Seit klein auf beschäftige ich mich mit Technik, Foto&Videographie und Design. Um mein Wissen und Erfahrungen festzuhalten dokumentiere ich meine Errungenschaften, um diese mit euch zu teilen und für mich niederzuschreiben, damit ich später dort ansetzten kann, wo ich aufgehört habe und immer und überall auf meine Inhalte zugreifen kann. Mein Motto: Imagine it, Design it, Create it - Just do what you like..

Wir benutzen Cookies
Die Seite Trucker's Projetcs nutzt Cookies. Alle dieser Cookies sind essenziell für den Betrieb der Seite. Extern geladene Inhalte können Tracking Cookies enthalten, um Sie eindeutig zuordnen zu können. Sie können selbst entscheiden, ob Sie nur die Cookies zulassen möchten, die für die Grundfunktion der Seite sind, oder ob Sie alle Cookies erlauben möchten. Bitte beachten Sie, dass bei Ablehnung von nicht Essentiellen Cookies womöglich nicht alle Funktionalitäten der Seite zur Verfügung stehen, zum Beispiel extern geladene Inhalte. Die geladene Googlewerbung, so wie YouTube Videos dürfen keine personenbezogene Daten von den Seitenbesuchern generieren und auswerten.