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

轉載于:https://www.cnblogs.com/gshang/p/11018898.html

總結

以上是生活随笔為你收集整理的[教程]博客园插入视频教程的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。