關於Markdown中如何插入視頻這一問題
網上眾說紛紜，一直也沒找到一個確切的答案，想來也是，這些東西畢竟還不算成熟、各種以前提供過的方法現在來講，可能在更新或是關閉大潮中又沒了
而且，Markdown 這種結構，在不同的博客等可支持平台上，似乎某些細微之處或是一些特有規定也是不盡相同的。
話不多說，下面直接給出幾個展示效果！
效果一
源代碼
<iframe height=450 width=800 src="http://player.youku.com/embed/XMzMxMjE0MjY4NA==" frameborder=0 allowfullscreen>
</iframe>效果二
源代碼
<iframe width="800" height="450" src="https://v.miaopai.com/iframe?scid=SvyHaHOczsp7B6ftW86oqMMz62-h5ai6~Fwp8A__" frameborder="0" allowfullscreen>
</iframe>
下面兩段代碼在CSDN博客中由Markdown編寫顯示無效！
但需要說明的是:
大家可能看出來了，這段代碼與效果一中那段代碼神相似，在測試這兩者的時候，起先我也是百思不得解，明明差不多樣，怎么一個就可以正常插入視頻，一個就什么都沒有呢？
仔細點看，就會發現區別就在對應【'allowfullscreen'、
src='http://player.youku.com/embed/XMzMxMjE0MjY4NA=='】這兩個地方的單引號與雙引號之別
因為啊，從優酷那里復制得到的代碼，就是用的這個單引號 - | -。
而！不幸的是，這種寫法在這里是識別不了的 : ( ，必須要依照效果一中那種（雙引號）。
需要指出的是，這段代碼在我對Github Pages 搭建的博客中的 * . md文件（就是Markdown文件）做測試時，也是無效的…. : (
PS: 如果大家有不同情況的，歡迎與我聯系 !
<iframe height=450 width=800 src='http://player.youku.com/embed/XMzMxMjE0MjY4NA==' frameborder=0 'allowfullscreen'>
</iframe>
需要指出的有
1. 這段代碼在我對Github Pages 搭建的博客中的 * . md文件（就是Markdown文件）做測試時，竟在接連很多次的失敗中意外成功了！: )
2. 對於CSDN博客中（Markdown編寫）依然無效…
3. 因為我這段時間正在配置以及豐富我的GitHub Blog(由Jekyll 驅動，整體框架在網上有很多教程與資源)，在測試到在about.md文件中添加在線視頻這一功能模塊時，遇阻。幸好最后這一問題得到解決，這也就是為什么寫這篇blog 的緣由所在。
特別感謝:
[秒拍] （http://www.miaopai.com/u/mob_35611282）在我很困惑、煩躁的時候冒了出來
<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://gslb.miaopai.com/stream/PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__.mp4?mpflag=64&vend=1&os=3&partner=1&platform=2&cookie_id=&refer=miaopai&scid=PAEyMDoxMSB9hV6BVT1l5SHT-sMVVRVgHlL7bA__ " type="video/mp4">
</video>
補充說明
從sf上截取下來的一段論述以及對應代碼，如下：
youku和tudou目前不支持。
目前只支持HTML的video標簽，例如：
<video id="video" controls="" preload="none" poster="http://media.w3.org/2010/05/sintel/poster.png">
<source id="mp4" src="http://media.w3.org/2010/05/sintel/trailer.mp4" type="video/mp4">
<source id="webm" src="http://media.w3.org/2010/05/sintel/trailer.webm" type="video/webm">
<source id="ogv" src="http://media.w3.org/2010/05/sintel/trailer.ogv" type="video/ogg">
<p>Your user agent does not support the HTML5 Video element.</p>
</video>說明：這段代碼在CSDN博客上沒能成功，在GitHub Pages 我要去測試實現的關於about.md添加視頻是成功的。（聳聳肩…
在GitHub Pages中Markdown文件中成功添加視頻，在線展示見 Here .
相關鏈接
友情鏈接
補充 - - - 站外視頻/iframe/web內嵌內容響應式代碼
從網上來看，似乎這項技術快要淘汰了（因為以前也沒接觸過這個東西，不好多評論），主要是我現在需要用到這項功能，所以就先把眼前問題解決掉吧，至於其中的一些優化或改進在以后還可以慢慢整.
在響應式設計的網頁布局中有一些元素沒有發揮好，直接損壞響應式設計的布局。其中之一就是iframe元素，因為有時候你需要在頁面中嵌入外部資源，比如說站外視頻（優酷，騰訊視頻等），這個時候就需要用到iframe元素。
JavaScript的辦法就不講了，主要說下如使用CSS將嵌套進來的內容具有響應式的效果，比如說視頻等能隨着瀏覽器的視窗自動調整。
<iframe width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0"></iframe>iframe中包含了width和height屬性。移除這兩個屬性，iframe會不顯示。
width屬性意味着，當屏幕小於640px的時候，嵌入的內容會超出容器，將打破整個布局。接下來使用CSS的方法來解決這個問題。為了能讓嵌入的視頻在Web中實現響應式效果，需要在iframe標簽外添加一個容器div來包裹他。其結構類似這樣：
<div>
<iframe width="640" height="498" src="http://v.qq.com/iframe/player.html?vid=q0167swo7g2&tiny=0&auto=0"></iframe>
</div>我們給包含iframe的div容器添加一個類名video-container。
.video-container { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } 設置position的值為relative，用來給iframe設置為absolute值；
設置padding-bottom值來計算視頻的縱橫比例。在我們的示例中，寬高的比例是16:9，表示高度是寬度的56.25%。如果寬高比是4:3，我們設置padding-bottom值為75%；
設置padding-top值為30px，主要為Chrome指定一個空間；
height設置為０，因為我們通過padding-bottom來設置元素的高度。我們沒有設置width，那是因為他要配合響應式設計自動調整容器的寬度；
設置overflow的值為hidden，確保溢出的內容能夠隱藏起來。
也要給iframe自身設置樣式。在你的樣式文件中添加下面的樣式代碼：
.video-container iframe { position: absolute; top:0; left: 0; width: 100%; height: 100%; }iframe放置在div.video-container容器里：
使用絕對定位，那是因為包含他的容器的高度為０，如果iframe進行正常的定位，我們將給他的高度也是0;
設置top和left，將iframe定位在容器的正確位置上；
設置width和height值為100%，確保視頻占滿所用容器空間(實際是設置padding-bottom)的100%。
這樣做之后，視頻將根據屏幕的寬度進行調整。(原文鏈接)
【附：一文一圖】
