在网页中使用iframe嵌入B站视频（腾讯视频同理）

最新推荐文章于 2024-09-11 21:57:53 发布

母猪产后护理专家

最新推荐文章于 2024-09-11 21:57:53 发布

阅读量5.5w

点赞数 29

分类专栏： web 文章标签： html iframe

本文链接：https://blog.csdn.net/DSH964/article/details/80961598

版权

web 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

先上效果：

首先是自己的页面：

点击图片后出现一个遮罩、遮罩上显示B站的视频：

这个效果很常见，例如在索尼中国的网站中：

点击图中的播放图标会出现腾讯视频的iframe窗口：

那么下面来看代码：

<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
		.video-btn{
		      position: absolute;
		      width:1080px;
		      height: 500px;
		      background:black;
		      top:50px;
		      left: 0px;
		      right: 0px;
		      margin: 0 auto;
		      display: none;
		      z-index: 101;
		    }
		 .video-area{
		      width:100%;
		      height: 100%;
		      background:black;
		    }
		 iframe{
		 	width: 100%;
		 	height: 100%;
		 }

		.video-shut{
		      height:25px;
		      width:25px;
		      border-radius: 12.5px;
		      font-size:medium;
		      color:black;
		      float:left;
		      text-align: center;
		      font-weight: bolder;
		      background: white;
		      display: block;
		      position: absolute;
		      top: -15px;
		      right: -15px;

		    }
		#shadow{
		     position: absolute;
		     opacity: 0.5;
		     filter:alpha(opacity=50);
		     bottom:0;
		     left: 0;
		     right: 0;
		     top: 0;
		     background:black;
		     z-index: 100;
		     display: none;
		   }
	</style>
	
</head>
<body>
	<center>
		<div class="main" style="height: 100px;margin-top: 100px;">
		  <a href="javascript:;" class="video" id="video"><img src="http://i1.hdslb.com/bfs/archive/62915c7879fb3149bd8e21fb6e3c06749b7b40b2.jpg@160w_100h.webp"></a>
		</div>
		<div class="video-btn" id="video-btn">
			<div class="video-area" id="video-area"></div>
			<a class="video-shut" id="video-shut">×</a>
		</div>
		<div id="shadow"></div>
	</center>
</body>
</html>
<script type="text/javascript">
		
  var obtn=document.getElementById('video');
  var ovideo=document.getElementById('video-btn');
  var oatn=document.getElementById('video-area');
  var oshut=document.getElementById('video-shut');
  var oshadow=document.getElementById('shadow');
  obtn.οnclick=function () {
    ovideo.style.display='block';
    oshadow.style.display='block';
    oatn.innerHTML='<iframe src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>';
  }
  oshut.οnclick= function () {
    ovideo.style.display='none';
    oshadow.style.display='none';
    oatn.innerHTML="";
  }
</script>

这里面的视频地址可以在B站视频的下方分享窗口获取：

注意！这里获取到的嵌入代码是：

<iframe src="//player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

URL少了传输协议，需要加上http:或者https:，否则会以file来传输

<iframe src="http://player.bilibili.com/player.html?aid=6117110&cid=9931722&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>

最后， 哔哩哔哩 (゜-゜)つロ干杯~-bilibili