如何使用可變寬度/高度嵌入動態寬度網頁的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) 

編輯

我現在只是創造了這個對黑客我的工作。在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;