Comment puis-je intégrer une vidéo YouTube à l'aide de largeurs/hauteurs variables pour une page Web de largeur dynamique?

Question

Je veux définir une vidéo youtube à 100% de largeur afin qu'elle évolue de manière appropriée dans une colonne de largeur dynamique sur une page Web que je conçois.

Le problème est que la hauteur ne se comporte pas comme la hauteur d'une image. Au lieu de redimensionner proportionnellement, il s'effondre (s'il est défini sur "auto" ou laissé vide) ou il échelles apparemment aléatoire s'il est défini sur un pourcentage.

Comment puis-je obtenir qu'il reste proportionné tout en restant dynamique?

Answer 1

Avec jQuery, vous pouvez le faire:

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

J'ai maintenant viens de créer ce pour un hack je travaille. En coffeescript parce qu'il est tellement plus agréable:

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;