[教程]博客園插入視頻教程

【學習觀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 。