如何使用可变宽度/高度为动态宽度网页嵌入 youtube 视频？

Question

我想将 youtube 视频设置为 100% 宽度，以便它在我正在设计的网页上的动态宽度列中适当缩放。

问题是高度不像图像的高度。它不是按比例缩放，而是折叠（如果设置为“自动”或留空），或者如果设置为百分比，它会看似随机地缩放。

我怎样才能让它在保持动态的同时保持比例？

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)

编辑

我现在刚刚为我正在研究的一个 hack 创建了这个。在咖啡脚本中，因为它更好：

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;