ROG Innovation Logo

Tutorials, Gadgets und vieles mehr - Idea. Creation. Success. - Let's create the future!

Video responsive einbinden

responsivevideo

Responsive Websiten gehöhern immer mehr zum Standart (sprich Websiten bei denen sich das Design der Bildschirmgrösse anpasst z.B. Desktop, Tablet oder Smartphone).
Nun stellen sich aber viele Websiteprogrammierer die Frage wie sie ein Video responsive in ihr Website einbetten können.
Dies kann mit der untenstehenden Lösung sehr einfach realisiert werden und funktioniert super.

Beispielseite
Beispiel ansehen


Hierfür wird der "Embeded" Code z.B. eines iframe YouTube Videos einfach mit einem zusätzliche DIV Container umschlossen. Dies funktioniert nicht nur bei YouTube Videos sondern auch bei Vimeo Videos und allesn anderen Videos, welche sich in einem ifranme befinden.

HTML Code
<div class="responsive-video">
<iframe width="1280" height="720" src="https://www.youtube.com/embed/XyF9Fcn2WbI" frameborder="0" allowfullscreen></iframe>
</div>

CSS Code
.responsive-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;}
.responsive-video {
position: relative;
padding-bottom: 56.25%; /* Default for 1600x900 videos 16:9 ratio*/
padding-top: 0px;
height: 0;
overflow: hidden;}

Hinweis
Der obenstehende Code ist für Videos mit einem Seitenverhältnis von 16:9 ausgelegt.
Wird ein anderes Verhältnis benötigt muss der Wert 56.25 abgeändert werden.

Berechnungsformel
(Video-Höhe / Video-Breite)*100= %-Angabe


download Download
responsivevideo.zip


Enthaltene Dateien:
  • responsivevideobeispiel.html


Kommentare
Hier können sowohl Fragen wie auch ein Feedback zum oben stehenden Artikel eingetragen werden.


*Name:


*Kommentar:

(max. 500 Zeichen)

Terms:


*Pflichtfeld

Hinweis:
Der Eintrag wird nach einer redaktionellen Prüfung in den kommenden Tagen freigeschalten.

Top Themen

Suche
DoubleTwist
doubletwist iTunes mit Android Handy synchronisieren
Feedback
feedback
Anzeige
Spenden
ROG Innovation unterstützen