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

相关推荐
旧曲重听17 分钟前
最快实现的前端灰度方案
前端·程序人生·状态模式
默默coding的程序猿16 分钟前
3.前端和后端参数不一致,后端接不到数据的解决方案
java·前端·spring·ssm·springboot·idea·springcloud
夏梦春蝉22 分钟前
ES6从入门到精通:常用知识点
前端·javascript·es6
归于尽28 分钟前
useEffect玩转React Hooks生命周期
前端·react.js
G等你下课30 分钟前
React useEffect 详解与运用
前端·react.js
我想说一句31 分钟前
当饼干遇上代码:一场HTTP与Cookie的奇幻漂流 🍪🌊
前端·javascript
funnycoffee12331 分钟前
Huawei 6730 Switch software upgrade example版本升级
java·前端·华为
小鱼小鱼干34 分钟前
【Tauri】Tauri中Channel的使用
前端
拾光拾趣录36 分钟前
CSS全面指南:从基础布局到高级技巧与实践
前端·css
南屿im39 分钟前
基于 Promise 封装 Ajax 请求:从 XMLHttpRequest 到现代化异步处理
前端·javascript