Как определить встраивание игрока в дизайн жидкости, чтобы сохранить соотношение сторон?(при ширине 100%)

Question

Есть ли способ обработать встраиваемые проигрыватели как изображения в плавном дизайне?

Обычно я устанавливаю ширину изображений на 100% и позволяю браузеру вычислять высоту (современные браузеры масштабируют изображения с исходным соотношением сторон).

Это не относится к элементу <embed>. Я понимаю, что видеоинформация не предоставляется, но она должна быть доступна каким-то образом, без фиксированных значений пикселей. В большинстве случаев используются только пропорции 16: 9 и 4: 3. Если бы можно было добавить только эти два значения, это было бы очень полезно.

При width="100%" и / или style="width: 100%;" встроенное видео правильно заполняет контейнер (по горизонтали). Высота должна быть (ширина / 4 * 3) или (ширина / 16 * 9) , но, насколько я знаю, нет способа рассчитать ее.

Я бы предпочел решение без встроенных стилей, и хотя атрибуты высоты и ширины требуются / рекомендуются, я не люблю добавлять какие-либо заданные значения длины в HTML. Решение CSS или «секретный» параметр для встроенного видео были бы идеальными. Если есть решение для YouTube, этого мне достаточно.

Answer 1

Это решение отлично сработало для меня.

http://css -tricks.com / NetMag / FluidWidthVideo / Статья-FluidWidthVideo.php

^ Размеры только для вставки жидких YouTube.

С этим вы можете полностью удалить атрибуты высоты и ширины iframe. Он будет автоматически соответствовать ширине родительского контейнера.

Answer 2

Вы можете сделать это с помощью jQuery.Примерно так:

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);

Однако, если вы хотитефункциональность.

Answer 3

Мне просто нужно было сделать это для проекта, в котором у меня было встроенное видео на YouTube, центрированное на странице поверх фонового изображения, которое было настроено на отображение 100vh x 100vh, за исключением небольшого пространства для заголовка и панели stickynav. Было важно, чтобы видео на YouTube не только масштабировалось, но и сохраняло 30-пиксельное поле снизу изображения.

Поэтому я устанавливаю размер фонового изображения при загрузке страницы относительно размера окна и определяю размеры iframe в функции onYouTubeIframeAPIReady, которая вызывается API Youtube только после загрузки фрейма. У меня также есть та же функция при изменении размера окна, так что она будет плавно масштабироваться, если вы измените размер окна браузера.

Так как вертикальное поле было важной проблемой, я начал с высоты, установив высоту фрейма на основе высоты фонового изображения минус пространство, необходимое для полей. Затем я вручную вычислил соотношение сторон 16: 9 для ширины, разделив высоту на 9 и умножив на 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>

Answer 4

также, проверьте этот маленький плагин jQuery от über-guru Крис Койер: http://fitvidsjs.com