网页通过iframe嵌入响应式视频
1、打开PyCharm开发工具，新建‘video.html’文件，先加入一个iframe便签，放入一个托管视频平台的视频，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div > <iframe src="//player.bilibili.com/player.html?aid=34099010&cid=59708694&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> </div></body></html>
这里src可以去找个平台的视频
2、在左上角浏览器图标打开查看效果如下图，实现了视频的插入
3、在包裹视频的外层再添加一个div，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body> <div> <div > <iframe src="//player.bilibili.com/player.html?aid=34099010&cid=59708694&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> </div> </div></body></html>
4、为两个div设置样式，代码如下：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .video-outer-wrap{ width:1500px; max-width:100%; } .video-wrap{ position:relative; padding-bottom:55%; padding-top:30px; height:0; overflow:hidden; } </style></head><body> <div class="video-outer-wrap"> <div class="video-wrap"> <iframe src="//player.bilibili.com/player.html?aid=34099010&cid=59708694&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe> </div> </div></body></html>
内层div的position设为relative
5、为iframe便签增加属性，设置position为absolute，对父标签div绝对固定，宽度和高度都设置百分百
.video-wrap iframe{ position:absolute; top:0; width:100%; height:100%;}
6、在浏览器查看效果，就可以到变化
7、拖拽缩小浏览器窗口，视频大小也相应改变，实现了响应式