[教程]博客园插入视频教程

【学习观15】人类为啥不进化成过目不忘？记忆力差难道不阻碍学习吗？

代码

<div class="video">
<iframe src="//player.bilibili.com/player.html?aid=54874176&cid=95969626&page=1" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
</div>

博客园后台插入样式

#cnblogs_post_body .video{
    height: 0;
    padding-bottom: 56.25%;  /* 16:9 */
    position: relative;
    width: 100%;
}

#cnblogs_post_body .video iframe{
position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
}

原理

• markdown的代码提交后会自动被转换为html代码，而已经包含了html的代码将不会被转换，因此可以用设计html的方法在文章中插入视频。
• 控制视频比例，视频的最佳比例是16 : 9，为了让画面自适应，让iframe的宽度占满容器的宽，而高度根据宽度自动调整比例，利用padding的尺寸是根据父元素来计算的特性，将父元素的宽设置为100%，而高设置为0，通过padding撑开高度，撑开的长度是宽度的56.26%，达到16 : 9 。