引用视频播放器简介
由于之前添加了一些视频播放器的外链和修改的一些代码，但技术有限，总是不太理想，今日有空网上找到了更好的在博客中插入视频播放器的方法，顺便记录一下笔记，分享给需要的小伙伴。
关于视频播放器的选择
样式1
1
| <iframe src="//player.bilibili.com/player.html?aid=54216146&bvid=BV1j4411p7UJ&cid=96484563&page=1" scrolling="no" border="0" width="100%" height="300px" frameborder="no" framespacing="0" allowfullscreen="true" style="border:3px solid #009ad6;border-radius:45px"> </iframe>
|
说明：该代码的使用适合于从头到尾无快进、无全屏显示，只针对于强迫症快进又想好好看视频的小伙伴使用。
效果如下：
样式2
1
2
3
4
5
6
7
8
9
| <!DOCTYPE HTML>
<html lang="zh-CN">
<body>
<style>
.iframe-body-sty{position: relative;overflow: hidden;height:600px;width: 100%;background-color: #145b7d;border-radius:25px;}
.iframe-body-sty>#iframe-shrink{position: absolute;transform:scale(0.55);left: -300px;top: -190px;}
</style>
<div class="iframe-body-sty" >
<iframe id="iframe-shrink" src="//player.bilibili.com/player.html?aid=85793766&bvid=BV137411B7vB&cid=146678826&page=1" width="1400px" height="980px" style="border-radius:10px" ></iframe></div></body></html>
|
说明：该代码的使用适合可对视频进行快进的小伙伴，但无法全屏观看，仅限于博客文章内容使用，可自由修改CSS样式。
效果如下：
样式3
1
2
3
| {% raw %}
<div style="position: relative; width: 100%; height: 0; padding-bottom: 75%;"><iframe src="//player.bilibili.com/player.html?aid=23836532&bvid=BV11p411o73u&cid=39858896&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true" style="position: absolute; width: 100%; height: 100%; left: 0; top: 0;"></iframe></div>
{% endraw %}
|
说明：该代码对原生的播放器标签样式进行美化，具有视频快进和全屏播放功能，可自由修改美化样式，博主强烈推荐该方法。
效果如下：
好了，本篇博文到此结束，小伙伴可根据自己想法选择添加~ 最后祝大家 新年快乐！恭喜发财！
