如果让嵌入的视频实现响应式

让我们来看看另一个在今天的网站中非常重要的媒体——视频。由于大多数网站使用的视频来自第三方网站，我决定把重点放在 Nick La 的弹性视频技术，这种技术可让您嵌入的响应式的视频。

　　HTML：

			
									class="video-container">

									    <code class="javascript string" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: blue !important; background: none !important;">"<a href="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" style="color: rgb(100, 102, 179); margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.1em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; min-height: auto !important; background: none !important;">http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0</a>"</code>&nbsp;<code class="javascript plain" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">width=</code><code class="javascript string" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: blue !important; background: none !important;">"800"</code>&nbsp;<code class="javascript plain" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">height=</code><code class="javascript string" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: blue !important; background: none !important;">"450"</code>&nbsp;<code class="javascript plain" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">frameborder=</code><code class="javascript string" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: blue !important; background: none !important;">"0"</code><code class="javascript plain" style="margin: 0px !important; padding: 0px !important; border-radius: 0px !important; border: 0px !important; bottom: auto !important; float: none !important; height: auto !important; left: auto !important; line-height: 1.8em !important; outline: 0px !important; overflow: visible !important; position: static !important; right: auto !important; top: auto !important; vertical-align: baseline !important; width: auto !important; box-sizing: content-box !important; font-family: Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace !important; min-height: auto !important; color: rgb(0, 0, 0) !important; background: none !important;">>

　　CSS：

			
									.video-container {

									    position: relative;

									    padding-bottom: 56.25%;

									    padding-top: 30px;

									    height: 0;

									    overflow: hidden;

									}

									.video-container iframe, 

									.video-container object, 

									.video-container embed {

									    position: absolute;

									    top: 0;

									    left: 0;

									    width: 100%;

									    height: 100%;

									}

　　在你的网站上应用了这些代码后，嵌入的视频也是响应式（Responsive）的了。

如果让嵌入的视频实现响应式

分享至微信分享

分享至微信

分享至微信