Markdown中如何插入视频

关于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&amp;vend=1&amp;os=3&amp;partner=1&amp;platform=2&amp;cookie_id=&amp;refer=miaopai&amp;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%。

这样做之后，视频将根据屏幕的宽度进行调整。(原文链接)

【附：一文一图】