bootstrap-auto-resize-video für Bildschirm-Größe

Ich versuche zu entscheiden, zwischen der Verwendung von Bootstrap und Foundation für front-end-Arbeit für eine node.js express-route. Ich Frage mich, ob Bootstrap hatten, eine Möglichkeit zu haben, ein äquivalent der Flex-Video-Funktion der Stiftung (eine automatische Größenanpassung basierend auf Bildschirmgröße, soweit ich das sagen kann)?

Bearbeiten:
Über Peter Wooster Antwort, wenn es eine Lösung, die leicht getan werden kann, ohne einen Rahmen, warum machen Menschen so eine große Sache über Flex-Video dann?

Es ist ein nettes Verkaufsargument und nicht offensichtlich ist. Ich habe gerade überprüft Ihre demo auf foundation.zurb.com/docs/components/flex_video.html, und Sie verwenden den gleichen trick, den ich hielt in meiner Antwort.

InformationsquelleAutor Bren | 2014-06-29

  1. 2

    Brauchen Sie nicht, einen Rahmen zu tun, ansprechende video, so können Sie es hinzufügen, falls es nicht enthalten ist.

    Der trick ist, wickeln Sie das video in ein div mit width:100%; height:0; padding-bottom:66% oder was auch immer das Seitenverhältnis, die Sie wollen das video zu haben. Legen Sie die Breite und Höhe auf dem video zu 100%. Das div wird korrekt skaliert und behält das Seitenverhältnis und den video-füllen werden.

    Edit: dieser trick ist nicht neu, nur wird es nicht bekannt, hier ein Artikel von 2009 beschreibt es: http://alistapart.com/article/creating-intrinsic-ratios-for-video. Zum Glück ist der IE5-6 kludges nicht mehr benötigt werden.

    Ja, das ist, was ich vermutete. Keine Ahnung warum die Leute solch eine große Sache über Flex-Video, dann ist dies nicht ein großer Pluspunkt für jemanden Berücksichtigung Stiftung? Seine unter einigen der top google Treffer bei der Suche nach Unterschiede zwischen den frameworks. Danke!
    Dieser trick ist nicht sehr bekannt. Wer hätte gedacht, dass das vertikale padding würde, Skalierung relativ zu Breite?

    InformationsquelleAutor Peter Wooster

  2. 11

    Bootstrap hat reaktionsschnell Weg bettet: http://getbootstrap.com/components/#responsive-embed

    Grundlose Beispiel allein um zu vermeiden, dumme nervige Bürokraten SO von Klagen über "link-nur Antwort":

    <!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
  <iframe class="embed-responsive-item" src="…"></iframe>
</div>

    InformationsquelleAutor cvrebert

Schreibe einen Kommentar