Почему новый медленный?

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

Предположим, что у вас есть встроенное видео:

<object>
     <param ... /><param ... />...
     <embed src="..." ...</embed>
</object>

Затем вы можете разместить все это внутри div с классом «видео». Этот видеокласс, вероятно, будет жидким элементом вашего сайта, который сам по себе не имеет прямых ограничений по высоте, но при изменении размера браузера он будет меняться по ширине в соответствии с потоком веб-сайта. Это будет тот элемент, который вы, вероятно, пытаетесь получить во встроенном видео, сохраняя при этом определенное соотношение сторон видео.

Чтобы сделать это, я поместил изображение перед встроенным объектом в «видео» "класс div.

!!! Важная часть состоит в том, что изображение имеет правильное соотношение сторон, которое вы хотите сохранить. Кроме того, убедитесь, что размер изображения максимально высок, чем самый маленький, который вы ожидаете от видео (или того, что вы поддерживаете A.R.), чтобы получить на основе вашего макета. Это позволит избежать любых возможных проблем при разрешении изображения при его изменении в процентах. Например, если вы хотите сохранить соотношение сторон 3: 2, не просто используйте изображение 3px на 2px. Он может работать при некоторых обстоятельствах, но я не проверял его, и, вероятно, было бы неплохо избежать.

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

Я использую полностью прозрачный png, но на самом деле я не думаю, что это имеет значение, если вы сделаете это правильно. Например:

<div class="video">
     <img class="maintainaspectratio" src="maintainaspectratio.png" />
     <object>
          <param ... /><param ... />...
          <embed src="..." ...</embed>
     </object>
</div>

Теперь вы можете добавить CSS, похожий на следующее:

div.video { ...; position: relative; }
div.video img.maintainaspectratio { width: 100%; }
div.video object { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; }
div.video embed {width: 100%; height: 100%; }

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

Способ, которым он работает, зависит от свойств позиции элемента класса видео и элемента, который вы хотите сохранить, определенного формата. Он использует то, как изображение будет поддерживать правильное соотношение сторон при изменении размера элемента. Он сообщает, что все еще находится в элементе видео класса, чтобы получить полную выгоду от недвижимости, предоставляемой динамическим изображением, заставляя ее ширину / высоту до 100% элемента видеокласса корректироваться с помощью изображения.

Довольно круто, а?

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