学习链接

  • https://xbeibeix.com/archives/205

全部代码

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		*{margin: 0 auto;padding: 0;box-sizing: border-box; /* 添加这个属性以确保元素的宽度和高度是包含padding和border的 */}
		 /* 设置body的最小高度为视口的100%，以便Flex容器可以覆盖整个屏幕 */
        body, html {
            min-height: 100%;
        }
        /* 将包裹iframe的div设置为Flex容器，并使其子元素居中 */
        .center-iframe {
            display: flex; /* 启用Flexbox布局 */
            justify-content: center; /* 水平居中 */
            align-items: center; /* 垂直居中 */
            min-height: 100vh; /* 容器的高度至少为视口的100% */
        }
        /* 由于iframe的宽高设置为百分比，所以这里可以去掉style属性中的width和height */
        iframe {
            position: static; /* 由于Flex布局已经居中，所以不需要绝对定位 */
            scrolling: "no";
            border: "0";
            frameborder: "no";
            framespacing: "0";
            allowfullscreen: "true"; /* 注意属性值应该用引号包围 */
        }
	</style>
</head>
<body>
	<div class="center-iframe">
	    <iframe 
	    	style="position: absolute; width: 50%; height: 50%; " 
	    	src="https://player.bilibili.com/player.html?aid=783404779&bvid=BV1224y1T7oh&cid=1124843782&p=15&high_quality=1&as_wide=1&danmaku=0" 
	    	scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="ture"> 
	    </iframe>
	</div>

	<!-- 
		要修改iframe标签的url：
			在 // 前面加上 https:
			在视频地址最后面加上  &high_quality=1
		
		iframe标签的参数（常用）：
		page -> 起始下标为 1 (默认值也是为1)
		as_wide -> 是否宽屏 【1: 宽屏, 0: 小屏】
		high_quality -> 是否高清 【1: 高清(最高1080p) / 0: 最低视频质量(默认)】
		danmaku -> 是否开启弹幕 【1: 开启(默认), 0: 关闭】
		allowfullscreen -> allowfullscreen= "ture" 允许全屏，使用该参数可以在浏览器中全屏播放

		如果要在第60秒开始，可以加入&t=60。
		如果要让它自动播放的话，可以加入&autoplay=true。
	 -->
	 <!-- 示例 -->
	 <!-- 
	 <div style="position: relative; padding: 30% 45%;">
		<iframe style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;" 
			src="https://player.bilibili.com/player.html?aid=76053337&;bvid=BV11J41127DF&cid=130096191&page=1&as_wide=1&high_quality=1&danmaku=0" 
			frameborder="no" scrolling="no">
		</iframe>
	</div> -->

	<script type="text/javascript">
	</script>
</body>
</html>

最后效果图

网页嵌入B站视频Demo_B站视频