Как я могу встроить видео YouTube, используя переменные ширины / высоты для веб-страницы с динамической шириной?

Question

Я хочу установить для видео на YouTube ширину 100%, чтобы он соответствующим образом масштабировался в столбце динамической ширины на разрабатываемой веб-странице.

Проблема в том, что высота не ведет себя как высота изображения. Вместо пропорционального масштабирования, оно либо сворачивается (если установлено «auto», либо оставлено пустым), либо кажется случайным, если задано процентное значение.

Как мне сделать так, чтобы он оставался пропорциональным, оставаясь динамичным?

Answer 1

С помощью jQuery вы можете сделать это:

newwidth = 200; // or worked out dynamically from width of an object after window resize
mov = $('object') // i.e. grab the object, perhaps with another selector too

oldheight = mov.attr('height')
oldwidth =  mov.attr('width')
newheight = newwidth/oldwidth * oldheight

mov.attr('width', newwidth).attr('height', newheight)

EDIT

Я только что создал это для хака, над которым я работаю. В coffeescript, потому что это намного приятнее:

resize_youtube_to_container =  (obj) ->
    newwidth = obj.closest('div').width()  # find the width from parent div
    oldheight = obj.attr('height')
    oldwidth =  obj.attr('width')
    newheight = Math.round(newwidth/oldwidth * oldheight)
    obj.attr('width', newwidth).attr('height', newheight)
    return obj

$(document).ready = ->
    movs = $('object, embed') # need to do both object and embed I think...
    movs.each -> resize_youtube_to_container($(this))

Answer 2

$pattern = "/height=\"[0-9]*\"/";

$string = preg_replace($pattern, "height='120'", $rs['url']);

$pattern = "/width=\"[0-9]*\"/";

$string = preg_replace($pattern, "width='200'", $string);

echo $string;