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.

Author:

Stefan J. Trucker

Stefan J. Trucker

Seit klein auf beschäftige ich mich mit Technik, Foto- & Videographie und Design. Um mein Wissen und meine Erfahrungen festzuhalten dokumentiere ich diese hier auf dieser Seite. Ich bemühe mich die Seite übersichtlich zu gestalten, damit es einfach ist meine Errungenschaften zu teilen. Ich nutze diese selbst um später dort anzusetzen wo ich aufgehört habe, oder wo mich mein Gedächtnis im Stich gelassen hat. So kann jeder von überall auf meine Inhalte zugreifen und schnellstmöglich zum gewünschten Ziel gelangen. Ich bin seit fast 10 Jahren als Ausbilder tätig und habe eine Leidenschaft entwickelt Wissen leicht und übersichtlich aufzubereiten. So hoffe ich mehrere zu motivieren sich in der Freizeit mit tollen Hobbies zu beschäftigen und dadurch das Leben ein Stückchen lebenswerter und interessanter zu gestalten. Ich lebe nach dem Motto: Imagine it, Design it, Create it - Just do what you like.

Überarbeitete Artikel

Di, Dez 26, 2017 Programme
Das perfekte gratis Programm für" Special Effekte" und ein großer Konkurrenz zu Adobe Aftereffect, denn nun kann man ganz schnell in die Welt der Computeranimationen eintauchen und unglaubliche...
Mi, Apr 19, 2017 Programme
Diese Erweiterung erleichtert es unerwünschte Inhalte von Seiten zu blockieren. Sie kann unerwünschte Inhalte, als auch die gesamten extern geladenen Inhalte einer Website blockieren, egal ob...
Di, Okt 26, 2021 Programme
Der Prusa Slicer ist eine Fork von Slic3r und wurde um viele Funktionen erweitert. Der Prusa Slicer unterstützt nun nicht nur FDM sondern auch SLA Drucker, natürlich, weil Prusa nun auch einen...
Wir benutzen Cookies
Die Seite Trucker's Projetcs nutzt Cookies. Alle dieser Cookies sind essenziell für den Betrieb der Seite.
Die geladene Werbung von Google Adsense, so wie YouTube Videos dürfen keine personenbezogene Daten von den Seitenbesuchern generieren und auswerten. Produkte von Amazon werden mit einem direktlink zu einem Bild verlinkt.