iframe视频宽度高度自适应( pc+移动都可以用,jq写法 )

注意:要引入jquery

可以直接使用弹框播放iframe

一、创建 index.html

html 复制代码
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
		<style>
			.modal {
				/* 默认隐藏 */
				display: none;
				position: fixed;
				z-index: 99999;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(3, 3, 3, .8);
			}
			.close-btn {
				/* 关闭按钮 */
				position: absolute; 
				z-index: 100; 
				right: 10px; 
				top: -30px; 
				font-size: 18px; 
				color: #fff;
				text-align: center;
				cursor: pointer;
			}
			/* 弹窗内容 */
			.modal-content {
				position: absolute;
				top: 50%;
				left: 50%;
				transform: translate(-50%, -50%);
				padding: 13px 9px;
				width: 100%; /* 这个要先去掉,手机端时在加上 */
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.iframe{
			  position: relative;
			  padding-bottom: 56.25%;
			  height: 0;
			  overflow: hidden;
			}
			.iframe iframe {
			  position: absolute;
			  top: 0;
			  left: 0;
			  width: 100%;
			  height: 100%;
			}
			.iframe-width{
				/* PC  */
				position: absolute; left:50%; transform: translateX(-50%); 
				width: 900px;
			}
			@media (max-width: 900px){
				/* 移动 */
				.iframe-width{
					/* position: absolute; top:50%; left:0; transform: translateY(-50%); 
					margin: unset; */
					width: 100%;
				}
			}
		</style>
	</head>
	<body>
		
		<div onclick="videoIframe()" style="color: blue;">打开弹框看iframe视频</div>
		
		<div id="myModal" class="modal">
			<div class="modal-content">
				<div id="iframeFuDiv" class="iframe-width">
					<span class="close-btn">关闭</span>
					<div class="modal-content-div">
					</div>
				</div>
			</div>
		</div>
		
		<script src="jquery-2.2.0.min.js"></script>
		<script src="index.js"></script>
		
	</body>
</html>

二、创建 index.js

javascript 复制代码
window.onload = function(){
	// 打开弹框( class="open-btn" )
	$(document).delegate('.open-btn','click',function(e){
		document.getElementById("myModal").style.display = "block"; 
	})
	// 关闭弹框( class="close-btn" )
	$(document).delegate('.close-btn','click',function(e){ 
		document.getElementById("myModal").style.display = "none";  
		$(".modal-content-div").html('')  // 关闭后清除视频
	})
	// 点击空白区域关闭弹框
	const myModal = document.getElementById('myModal');
	myModal.addEventListener('click', function(event) {
		if (event.target === myModal) { 
			myModal.style.display = 'none' 
			$(".modal-content-div").html('')  // 关闭后清除视频
		}
	});
}


// iframe视频弹框播放
function videoIframe(){
	let videoUrl = '//player.bilibili.com/player.html?isOutside=true&aid=113331050385027&bvid=BV144CDYzESY&cid=26355240647&p=1'
	let html = `
		<iframe id="videoIframe" height="506" width="900"  src="${videoUrl}" frameborder=0 allowfullscreen></iframe>
	`
	$(".modal-content-div").html(html)
	// 这个需要加上
	$('iframe').wrap('<div class="iframe"></div>')
	document.getElementById("myModal").style.display = "block"
}

参考链接:
格林威治:网站引入iframe视频,如何实现宽度高度自适应?

https://www.cnblogs.com/zsmj001/p/17210837.html

相关推荐
^^为欢几何^^5 分钟前
npm、pnpm和yarn有什么区别
前端·npm·node.js
AC-PEACE27 分钟前
Vue 中 MVVM、MVC 和 MVP 模式的区别
前端·vue.js·mvc
播播资源29 分钟前
ChatGPT付费创作系统V3.1.3独立版 WEB端+H5端+小程序端 (DeepSeek高级通道+推理输出格式)安装教程
前端·ai·chatgpt·ai作画·小程序·deepseek·deepseek-v3
zhrb1 小时前
打开Firefox自动打开hao360.hjttif.com标签解决方案
前端·firefox
安大桃子1 小时前
Cesium实现深色地图效果
前端·gis·cesium
程楠楠&M1 小时前
uni-app(位置1)
前端·javascript·uni-app·node.js
破z晓1 小时前
uniapp 整合openlayers 编辑图形文件并上传到服务器
前端·javascript·uni-app
码农君莫笑1 小时前
Linux系统上同时打印到物理打印机并生成PDF副本方法研究
linux·前端·chrome·打印·信管通
xlxxy_1 小时前
ABAP数据库表的增改查
开发语言·前端·数据库·sql·oracle·excel
m0_748234902 小时前
Spring Boot项目接收前端参数的11种方式
前端·spring boot·后端