wie definieren embed-player Höhe in fluid-design zu halten, wird das Seitenverhältnis? (bei der Breite 100%)

Gibt es eine Möglichkeit zu behandeln, einbetten, Spieler, die wie Bilder in einem fluid design?

Ich in der Regel legen Sie die Breite der Bilder zu 100%, und lassen Sie die browser berechnen die Höhe (moderne Browser skalieren die Bilder mit dem original-Seitenverhältnis).

Das ist nicht der Fall mit der <embed> element. Ich merke, dass die video-Informationen nicht gegeben, aber es sollte irgendwie, ohne Feste pixel-Werte. In den meisten Fällen nur 16:9 und 4:3 Aspekt-Verhältnisse verwendet werden. Wenn nur diese beiden Werte Hinzugefügt werden könnten, wäre es eine große Hilfe.

Mit width="100%" - und/oder style="width: 100%;" das eingebettete video füllt den container richtig (horizontal). Die Höhe sein soll (Breite/4*3) oder (Breite/16*9) aber soweit ich weiß, gibt es keine Möglichkeit, zu berechnen.

Ich würde lieber eine Lösung ohne inline-styles, und das, obwohl die Höhe und Breite Attribute sind erforderlich/empfohlen, ich weiß nicht, wie das hinzufügen Länge angegeben Werte in HTML. Eine CSS-Lösung oder einen "geheimen" parameter für das eingebettete video wäre ideal. Wenn es eine youtube-spezifische Lösung, das ist genug für mich.

InformationsquelleAutor zacksnipper | 2011-05-27

  1. 2

    Diese Lösung funktionierte perfekt für mich.

    http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

    ^ Nur CSS flüssig youtube-embed-Dimensionen.

    Mit diesem können Sie vollständig zu entfernen Sie die Attribute height und width des iframe. Es wird automatisch passen Sie den übergeordneten container der Breite.

    InformationsquelleAutor Scott Greenfield

  2. 1

    Könnte man es mit jQuery. So etwas wie dieses:

    HTML:

    <div>
<iframe></iframe>
</div>

    JS:

    var width = $('div').width();
var ratio = 16/9;
var height = width/ratio + 32; /* 32px is approx. height of controls */
$('iframe').css('height', height);

    Würden Sie allerdings tun es Fenster auf.Größe aswell, wenn Sie wollen, dass die Funktionalität.

    danke! ich habe es ausprobiert, aber es gibt ein problem. wenn ich width="100%" oder style="width: 100%;" die jquery .width() übersetzt es auf 100px, also die Höhe 56,25 px jedes mal... es sollten Messen Sie die Breite, anstatt die angegebene Prozent-Zahl als pixel-Wert.
    Sie wickeln konnte den iframe in ein div und dann die Breite aus, statt. Siehe Beispiel hier. jsfiddle.net/hRatJ
    Warum JavaScript, wenn es kann getan werden, in reinem CSS?

    InformationsquelleAutor martnu

  3. 0

    überprüfen Sie auch, ob aus diesem kleinen jQuery plugin von über-guru Chris Coyer: http://fitvidsjs.com

    InformationsquelleAutor nerdess

  4. 0

    Nur ich hatte dies für ein Projekt, in dem ich ein eingebettetes youtube-video auf der Seite zentriert auf der Oberseite ein hintergrund-Bild, das wurde eingestellt, um anzuzeigen, 100vh x 100vh minus ein wenig Platz für eine Kopf-und stickynav bar. Es war wichtig, dass das youtube-video nicht nur skalieren, sondern sorgen für eine präzise 30 pixel Rand von der Unterseite des Bildes.

    Damit ich die Größe des hintergrund Bild beim laden der Seite relativ zur Größe des Fensters und definieren die Maße des iframe innerhalb der onYouTubeIframeAPIReady-Funktion, die aufgerufen wird, durch die Youtube-API nur nach dem Bild geladen wird. Ich habe auch die gleiche Funktion auf Fenster Größe ändern, so dass es skaliert werden flüssig, wenn Sie die Größe des browser-Fensters.

    Da die vertikale Rand war ein wichtiges Thema angefangen habe ich mit der Höhe die Einstellung der Höhe des iframe auf der Grundlage der Höhe des hintergrund-Bildes abzüglich der benötigte Platz für die Margen. Ich habe dann manuell berechnet die 16:9-Seitenverhältnis für die Breite, die durch Division der Höhe von 9 und Multiplikation mit 16.

    $( document ).ready(function() {
    var content = $('#hero');
    var contentH = $(window).height() - 158;
    var contentW = $(window).width();
    content.css('height',contentH);
} );
$(window).resize(function() {
    var content = $('#hero');
    var iframe = $('.videoWrapper iframe');
    var contentH = $(window).height() - 158;
    var iframeH = contentH - 150;
    content.css('height',contentH);
    iframe.css('height',iframeH);
    var iframeW = iframeH/9 * 16;
    iframe.css('width',iframeW);
    var margin = ($(window).width() - iframeW) / 2;
    $('.videoWrapper').style.marginLeft = margin;
} );

<div id="hero">
    <div class="container">
        <div class="row-fluid">
            <hgroup class="span12 text-center" role="heading">
                <h1></h1>
                <h2></h2>
            </hgroup>
            <script src="https://www.youtube.com/iframe_api"></script>
            <center>
                <div class="videoWrapper">
                    <div id="player"></div>
                </div>
            </center>
            <script>
            var player;
            function onYouTubeIframeAPIReady() {
                player = new YT.Player('player', {
                    videoId:'xxxxxxxxx',playerVars: {
                        controls:0,enablejsapi:1,iv_load_policy:3
                    }
                } );
                var content = $('#hero');
                var iframe = $('.videoWrapper iframe');
                var contentH = $(window).height() - 158;
                var contentW = $(window).width();
                var iframeH = contentH - 150;
                iframe.css('height',iframeH);
                var iframeW = iframeH/9 * 16;
                iframe.css('width',iframeW);
            }
            </script>
        </div>
    </div>
</div>

    InformationsquelleAutor davidcondrey

Schreibe einen Kommentar