Адаптивная галерея с изображениями и YouTube встраивает соотношение сторон

Question

Адаптивная галерея с изображениями и YouTube встраивает соотношение сторон

0

Это сложный вопрос для правильного слова, поэтому я создал Fiddle для более точного представления того, что я пытаюсь сделать:

http://jsfiddle.net/LAtPJ/

.thumbnailContainer.video_embed
{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.thumbnailContainer.video_embed iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Вышеприведенный код отлично работает для очень приятных, отзывчивых видео на YouTube. Но...

Если вы представляете это в контексте медиа-галереи, где изображения и видео должны сосуществовать в полностью отзывчивом дизайне.

Будут строки и ряды средств массовой информации, и, вероятно, будет разница в соотношении сторон между изображениями и видео, и поэтому мы остаемся с чем-то, что уже не является однородным.

Эффективно, видео YouTube должно быть на 100% шире, но высота должна быть не выше и не короче, чем у изображений. Раньше у меня была версия этого, которая была фиксированной шириной и высотой настолько просто, что каждый образ и каждый iframe составляли 200 x 200. Теперь я хочу, чтобы что-то более мобильное, так что, хотя у изображений у меня есть именно то, что мне нужно, видео это не так.

Есть идеи?

Конечное решение (если оно есть) должно предпочтительно быть только CSS и не обязательно специфичным для YouTube (некоторые из видео будут другими службами, но в основном они передаются с помощью iframe, такого как YouTube).

Вы, ребята, потрясающие, поэтому, надеюсь, вы придумаете что-нибудь классное. Огромное спасибо.

SpongeBobPHPPants 23 сен. 2013, в 18:07

Источник

Теги:

html

css

css3

iframe

responsive-design

4 ответа

Ещё вопросы

Allon · Answer 1 · 2015-02-25T12-36-00.000Z

Это то, что я использую. Он устанавливает заполнение на основе атрибута ширины и высоты вставки и вычисляет соотношение сторон. Пока у вас есть 2 divs вокруг iframe (вы можете настроить для вставки), а ширина и высота, установленные как атрибут в iframe, будут работать.

jQuery(document).ready(function() {
    jQuery('.embed-wrapper').each(function(){
        dcembedheight = jQuery('iframe', this).attr( "height" );
        dcembedwidth = jQuery('iframe', this).attr( "width" );
        ratio = ((dcembedheight/dcembedwidth)*100).toPrecision(4) + '%';
        jQuery(this).attr("style" , "max-width:"+ dcembedwidth + "px");
        jQuery('.embed-container', this).css({"padding-bottom": ratio});
    });
});

HTML - исключить встроенную оболочку для 100% -ной ширины и использовать только css в соотношении 16: 9

<div class="embed-wrapper">
<div class="embed-container">
<iframe src="//giphy.com/embed/BVNbHPjIfSNOw" width="480" height="480" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
</div>
</div>

CSS - обратите внимание, что заполнение задается jquery, но css содержит по умолчанию соотношение 16: 9

.embed-container {
position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%;
}
.embed-container iframe, .embed-container object, .embed-container embed {
position: absolute; top: 0; left: 0; width: 100%; height: 100%;
}

SpongeBobPHPPants · Answer 2 · 2013-09-23T22-16-00.000Z

Я подумал, что было бы полезно документировать, как я решил это сделать.

@ivarPrudnikov любезно предложил захватить миниатюры YouTube из API. Что-то я уже рассмотрел, но, конечно, не имеет значения, содержит ли контейнер эскизов iframe, текст или действительно изображение, та же проблема существует.

Там нет прямого способа сохранить этот контейнер того же размера, что и другие контейнеры, не имея изображения с точным соотношением сторон.

Могут быть и другие способы... но я начал чувствовать, что они были слишком сложными, было бы сложно управлять продвижением вперед и, возможно, страдать от проблем с совместимостью с определенными браузерами.

Итак, я прибегал к тому, чтобы делать все серверное.

Все это написано на PHP в любом случае, поэтому я фактически передаю идентификатор видео YouTube на скрипт PHP, извлекаю миниатюру непосредственно с YouTube, а затем я обрезаю и изменю его размер на основе требуемой ширины миниатюр. высоту и соотношение сторон.

Все это происходит на лету. Я, скорее всего, реализую какой-то базовый механизм кеширования, в результате чего я фактически сохраняю изображение локально в конце концов.

До тех пор проблема решена, и я благодарю вас за каждого, у кого тоже есть время ответить и/или прокомментировать.

Очень ценим, всегда!

Крис

isherwood · Answer 3 · 2013-09-23T14-01-00.000Z

Высота 100% сложна, так как вы можете видеть здесь: Как заставить детское Div до 100% Div родителя без указания родительской высоты?

Лучше всего использовать jQuery, если это вариант.

D.Alexander · Answer 4 · 2013-09-23T13-27-00.000Z

Вы могли бы попробовать предоставить и .thumbnailContainer и .thumbnailContainer.video_embed iframe классы min- и максимальную высоту. Конечно, это непроверено на мобильном телефоне, и я не уверен, как повлияет соотношение сторон для невосприимчивых видеороликов. Надеюсь это поможет.

ДЕМО здесь. Ниже приведен фрагмент кода:

.thumbnailContainer
{
    overflow: hidden;
    position: relative;
    width: 100%;    
    min-height: 200px;
    max-height: 200px;
}

.thumbnailContainer.video_embed iframe
{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 200px;
    max-height: 200px;
}

К сожалению, это не совсем работает, как ожидалось, но я пошел по этому маршруту прошлой ночью. Проблема в том, что это разрушает отзывчивость дизайна. Он ограничивает высоту, которая будет зафиксирована, и поэтому он не дает желаемого эффекта. Большое спасибо за ваши усилия, хотя :)