Bilder sind nicht die einzigen Medien, die sich in unser flexibles Raster einfügen müssen. Und Bilder waren im Vergleich zu Videos einfach! Wenn Sie die width eines <img> festlegen und dessen height auf auto überschreiben, behält das Bild natürlich sein Seitenverhältnis bei. Dies gilt auch für <video>, aber ehrlich gesagt werden die meisten Videos im Web heutzutage direkt über das <video>-Tag auf Seiten eingebettet.
Als Beispiel habe ich versucht, dies hier in der Lodge zu tun und habe es schließlich aufgegeben, da Vimeo Pro so viel praktischer war (funktioniert auf jedem Gerät, schöner Player, günstig, schnelles Streaming usw.). Sie betten Vimeo-Videos (typischerweise) nicht über ein <video>-Tag ein, sondern verwenden deren bereitgestellten Einbettungscode, der ein <iframe> ist. YouTube und eine Reihe anderer beliebter Videodienste nutzen dies ebenfalls.
iFrames behalten beim Ändern der Größe **nicht** ihr Seitenverhältnis wie Bilder. Wir können jedoch das ursprüngliche Seitenverhältnis ermitteln, indem wir seine Breite und Höhe testen und dividieren. Dann können wir diese Informationen verwenden, um eine Box mit genau diesem Seitenverhältnis zu erstellen (mit einem Padding-Trick, siehe Uncle Daves Ol’ Padded Box) und den iFrame darin absolut zu positionieren. Siehe: Intrinsic Ratios for Videos. So verhält sich das Video beim Vergrößern und Verkleinern im Wesentlichen wie ein Bild und respektiert sein Seitenverhältnis.
Oder wir könnten einfach FitVids.js (das ich mitgeschrieben habe) verwenden, um diesen gesamten Prozess zu automatisieren (es tut buchstäblich genau das, was ich beschrieben habe, nur automatisch). Wir fügen diese Bibliothek in unsere global.js auf die gleiche Weise wie prism.js hinzu. Zum ersten Mal benötigen wir jQuery, also holen wir uns den Link von ScriptSrc und binden ihn im Footer vor unserer global.js ein. Dann rufen wir in unserer global.js FitVids auf. Fertig und erledigt.
„funktioniert auf jedem Gerät, schöner Player, günstig, schnelles Streaming usw.“
Tatsächlich funktionierte es die ganze Zeit problemlos auf meinem Android-Gerät, bis Sie zu Vimeo gingen, jetzt beschwert es sich, dass ich einen „Browser benötige, der native H.264-Unterstützung bietet oder Flash installieren muss“. Ich habe es mit 4 verschiedenen Browsern versucht (einschließlich Android Stock). Nur zur Information, ich habe ein Motorola Photon mit Android 2.3.4…
Ansonsten genieße ich all die Videos sehr, tausend Dank!!!
Interessant. Ich muss mehr Android-Tests durchführen. Ich kann mir nicht vorstellen, dass Vimeo einfach beschlossen hat, Android nicht mehr zu unterstützen… Vielleicht kann ich etwas ändern oder es gibt etwas anderes.
Ich werde diesen Kommentar ausblenden, da es sich um ein eher spezifisches, vorübergehendes technisches Problem handelt.
Ich habe das gleiche Telefon und es lässt mich niemals Vimeo abspielen und vorher konnte ich YouTube-Videos einfach abspielen, indem ich auf den Link klickte (z.B. wenn jemand einen YouTube-Link auf Facebook teilt), aber jetzt muss ich sie ausschließlich über die YouTube-App abspielen, sonst werden sie nicht abgespielt. Ich denke, das Problem liegt nur bei diesem Telefon?
Hallo Chris, ich habe eine Frage an dich. Ich habe versucht, dir bei diesen Videos zu folgen, und arbeite auf meinem lokalen Host mit MAMP, aber der kostenlosen Version. Die Sache ist, wenn ich in meiner global.js die FitVids.js importiere, passiert nichts, wenn ich die Dinge in der Konsole inspiziere. Ich habe ein YouTube-Video, das mit . eingebettet ist. Wenn ich den JS-Code kopiere und einfüge, um das Video responsiv zu machen, in die Konsole so:
gibt mir die Konsole zurück $(article).fitVids(); das ist keine Funktion. Ich habe überprüft, ob meine Jquery-Bibliothek importiert ist und sie ist oben und sie ist da.
Das Seltsame ist, wenn ich CodeKit nicht verwende, um meiner global.js-Datei mitzuteilen, dass sie FitVids.js importieren soll, sondern es manuell in meinem footer.php mache, nachdem die jQuery-Bibliothek von Google importiert wurde, funktioniert es, nur wenn ich den Code erneut in die Konsole einfüge.
Hast du eine Ahnung, ob es daran liegt, dass ich keine lokale URL eingerichtet habe, wie du? Und anstattdessen localhost:8888/static/? verwende?
Vielen Dank.
Versuchen Sie, $(‘article’).fitVids(); zu verwenden
Ihnen fehlen die Anführungszeichen um das Wort Artikel…
Ich habe das versucht, keine Änderung. Ich habe exakt den gleichen Code wie Chris in seinem Video, bei ihm funktioniert es, bei mir nicht. Ich habe 4 Stunden damit verbracht und habe immer noch das Problem.
Für zukünftige Leute, die dieses Problem haben… Ich habe solide 30 Minuten damit verbracht, herauszufinden, warum die Konsole „Uncaught TypeError: undefined is not a function“ ausgibt. Letztendlich habe ich die Funktion so aufgerufen:
was einen Großbuchstaben vermissen lässt. =( Es sind immer die kleinen Dinge, die Probleme verursachen, richtig? haha
@Eduard
Versuchen Sie eine Klasse oder eine ID
Haben Sie jemals herausgefunden, was die schwarzen Balken verursacht hat? Ich habe ein ähnliches Problem. Aus irgendeinem Grund berechnet fitVids das Padding bei 75% statt bei 62,5% für ein 16:10-Video.
Ich glaube, in diesem Fall hatte das Video buchstäblich schwarze Balken. Oder das Seitenverhältnis, wie es von Vimeo kam, verursachte schwarze Balken, auch ohne FitVids. Der Trick besteht darin, es ohne FitVids korrekt anzuzeigen (passen Sie Höhe/Breite an, legen Sie es kurz in [CodePen](http://codepen.io/) ein, um damit zu spielen), dann wird es auch MIT FitVids korrekt skaliert. Es sei denn, Sie stellen fest, dass dies nicht der Fall ist, dann eröffnen Sie ein Problem im [Repo](https://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open).