如何在调整窗口大小时调整 YouTube 播放器的大小

发布于 2024-08-25 11:18:24 字数 2475 浏览 4 评论 0原文

我想显示包含 YouTube 视频的弹出窗口。我的问题是当用户调整弹出窗口大小时如何调整 YouTube 播放器的大小?

弹出窗口 PHP/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 播放器未调整大小。有什么我想念的吗?

I want to show Popup window contain YouTube video. My question is how to resize YouTube Player when user resize the Popup Window ?

Head section of Popup windows PHP/HTML code

<!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>

the page receive youtube video ID through $_GET variable.

the code above didn't work, the YouTUbe Player is not resized. Is there something I miss ?

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

素食主义者 2024-09-01 11:18:24

尽管如此,为什么要重写整个对象 html 而不是更新对象的高度/宽度呢?

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

再想一想,为什么不将高度/宽度设置为 100% 呢?

Still, why rewrite the whole of the object html instead of updating the objects height/width?

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

on second thought, why not just set height/width to 100%?

何时共饮酒 2024-09-01 11:18:24

我只是想念;符号

I just miss ; sign

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文