关闭iframe中弹窗，视频也关闭播放

最新推荐文章于 2024-01-26 15:34:10 发布

赖赖赖先生

最新推荐文章于 2024-01-26 15:34:10 发布

阅读量2.9k

点赞数

分类专栏： html+css 文章标签：音视频 javascript css3

本文链接：https://blog.csdn.net/qq_42177117/article/details/122432852

版权

html+css 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用iframe实现视频播放的方法，包括创建iframe框架、通过jQuery获取路径并显示视频，以及如何关闭播放窗口。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

实现思路：
1、写个iframe框架
2、JQ获取DIV里的路径值
3、弹出窗口，写一个iframe的html把值存进iframe的src
4、关闭窗口，把iframe的src清空或iframe框架直接关闭

 <!--iframe视频-->
<div class="video">
    <div class="video-nr" id="video-nr">
    </div>
      <div class="end" onClick="videoPlayClose()">X</div>
</div>
    


<script type="text/javascript">

function video(src){
 //写好iframe框架，写进html里
    var boxs ="<iframe width=\"100%\" height=\"100%\" src=\""+src+"\" scrolling=\"no\" frameborder=\"0\"   frameborder=\"0\"  ></iframe>"
	$("#video-nr").html(boxs);
	$(".video").fadeIn(500);
    console.log(boxs);  //点击后查看状态
    console.log(src); //查看路径
}
 //关闭
function videoPlayClose(){
	$("iframe").attr("src","");
	$(".video").delay(100).fadeOut(500); 

}

</script>    

<style>
.video{width:100%;height:100%;background:rgba(0,0,0,.255);display:none;position: fixed; top:0;left:0;padding:20px;box-sizing: border-box;z-index:9999999;}    
.video.on{display:block;}
.video-nr{width:70%;height:100%;background:#fff;padding:80px;box-sizing: border-box;position: relative;}
.video-nr .video-item{width:100%;height:100%;}
 .end{position:absolute;right:18%;top:3%;font-size: 50px;color:#000;z-index:99999999;}
</style>


	<div class="in3-box">
	    <a href="javascript:void(0);" onClick="video('videoDemo/test.php?id=ecbb443b1243441ca0910e7122a5a123')"> 
		</a>
	<!--获取video里的路径传到iframe -->	
	</div>