是否可以在不刷新视频的情况下调整来自外部源的正在运行的 Flash 视频的大小？抱歉新手问题。
到目前为止我尝试过但失败了。
HTML:
<html>
<head>
<script type="text/javascript" src="js/jquery.js" ></script>
<script type="text/javascript" src="js/streams.js" ></script>
<link href="style/stream.css" rel="stylesheet" type="text/css" />
</head>
<body>
<ul id="main">
<li id="one" class="video-player">
<!--AVENGERS TRAILER-->
<iframe width="560" height="315" src="http://www.youtube.com/embed/NPoHPNeU9fc" frameborder="0" allowfullscreen></iframe>
</li>
</ul>
<ul id="streams">
<li id="two" class="video-player">
2
</li>
<li id="three" class="video-player">
3
</li>
<li id="four" class="video-player">
4
</li>
<li id="five" class="video-player">
5
</li>
</ul>
</body>
</html>
CSS:
*{
padding:0px;
margin:0px;
}
#streams , #main{
list-style:none;
float:left;
width: 100%;
}
.video-player{
background-color:#666;
float:left;
height:390px;
width:640px;
margin:10px;
}
#main>li.video-player{
zoom:100%;
}
#streams>li.video-player{
zoom:50%;
}
JS 脚本。(未完成，当我看到它导致视频刷新时我停止了)它只是通过将 div 从父 div 移动到另一个 div 来更改 div 的缩放属性。
$(document).ready(function() {
$('.video-player').click(function() {
var parentid = $(this).parent().attr("id");
// Get the id of the div that was clicked
var cliked = $(this).attr("id");
var nextdiv = $(this).next().attr("id");
var prevdiv = $(this).prev().attr("id");
// Check the parent .
if (parentid == "streams" ){
$("#"+cliked).appendTo("#main");
};
if (parentid == "main" ){
$("#"+cliked).appendTo("#streams");
};
});
return false;
});
非常感谢任何帮助。
最佳答案
由于您只是将视频嵌入到 iFrame 中，因此更改 iframe 的宽度和高度属性没有问题，因此可以调整嵌入内容(您的 YouTube 视频)的大小，而不会对内容本身产生任何不良影响。
我为你写了一个小测试，只是为了确定:
var sizeIncreaseFactor = 1.05;
function resizeIframe(){
var myFrame = document.getElementById('myVideo');
myFrame.width = parseInt(myFrame.width) * sizeIncreaseFactor;
myFrame.height = parseInt(myFrame.height) * sizeIncreaseFactor;
}
<input type="button" onClick="resizeIframe();" value="Click to increase video size"></input>
<br />
<iframe id="myVideo" width="420" height="315" src="http://www.youtube.com/embed/_9bB7r0M9kg" frameborder="0" allowfullscreen></iframe>
关于javascript - 在不刷新视频的情况下调整从外部源运行的 Flash 视频的大小，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/9522710/