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

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