2010-03-20 301 views
2

我想顯示彈出式窗口包含YouTube視頻。我的問題是如何在用戶調整彈出窗口大小時調整YouTube播放器的大小?彈出窗口的PHP/如何調整窗口大小時調整YouTube播放器

頭部分的HTML代碼

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title>Wavin Video</title> 

<script src="jquery-1.4.1.min.js" type="text/javascript"></script> 
<script type="text/javascript" charset="utf-8"> 

$(document).ready(function(){ 

    //If the User resizes the window 
    //$(window).bind("resize", resizeWindow); 
    $(window).resize(resizeWindow).resize() 
    function resizeWindow(e) { 
     var target = "#youtubebox2"; 
     var newWindowHeight = $(window).height(); 
     var newWindowWidth = $(window).width(); 

     console.log("Width : "+newWindowWidth); 
     console.log("Height: "+newWindowHeight); 
     console.log("---------"); 

     $(target).html("<object width=\""+newWindowWidth+"\" height=\""+newWindowHeight+"\" id=\"youtubebox\"><param name=\"movie\" value=\"http://www.youtube.com/v/<?php echo $_GET['filename'];?>\"></param><param name=\"allowFullScreen\" value=\"true\"></param><param name=\"allowscriptaccess\" value=\"always\"></param><embed src=\"http://www.youtube.com/v/<?php echo $_GET['filename'];?>\" type=\"application/x-shockwave-flash\" allowscriptaccess=\"always\" allowfullscreen=\"true\" width=\""+newWindowWidth+"\" height=\""+newWindowHeight+"\"></embed></object>"); 
    } 

}); 

</script> 

</head> 
<body> 
<div align="center" style="padding:6px 0px 0px 0px;background-color: #ccc;" id="youtubebox2"> 

<object width="480" height="385" id="youtubebox"> 
<param name="movie" value="http://www.youtube.com/v/<?php echo $_GET['filename'];?>"></param> 
<param name="allowFullScreen" value="true"></param> 
<param name="allowscriptaccess" value="always"></param> 
<embed src="http://www.youtube.com/v/<?php echo $_GET['filename'];?>" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="480" height="385"> 
</embed> 
</object> 

</div> 
</body> 
</html> 

頁接收通過$ _GET變量的YouTube視頻ID。

上面的代碼不起作用,YouTUbe播放器沒有調整大小。有什麼我想念的嗎?

+0

我的錯誤,失蹤; – Permana 2010-03-20 04:38:26

回答

1

仍然,爲什麼重寫整個對象的html而不是更新對象的高度/寬度?

$("object, embed").height($(window).height()); 
$("object, embed").width($(window).width()); 

關於第二個想法,爲什麼不只是將高度/寬度設置爲100%?

+0

我剛剛發現這種方式,謝謝你的信息。第一種方法起作用。但第二種方式,視頻的高不會100% – Permana 2010-03-31 01:32:00