响应式布局包括 HTML5 视频

Question

我正在为响应式布局而苦苦挣扎...

在上图中，红色是 HTML5 视频，蓝色是图像。我正在使用 JavaScript 使 HTML5 视频响应 - //vjs.zencdn.net/4.12/video.js

但是不管我如何布局，Firefox 或 Chrome & IE 在图像 2 和 4 (Firefox) 或 5 (IE & Chrome) 下方有一个 1px 的线。

请在此处查看 jsfiddle.net 代码...

<div id="container">
    <div id="col_left">
        <img src="http://lorempixel.com/g/220/205/"/>
        <img src="http://lorempixel.com/g/220/270/" class="has_top_margin" />
    </div>
    <div id="col_center">
        <video id="example_video_1" class="video-js vjs-default-skin" poster="" data-setup='{"controls": false, "autoplay": true, "preload": "auto"}'>
            <source src="http://www.quirksmode.org/html5/videos/big_buck_bunny.mp4" type="video/mp4" />
        </video>
        <img src="http://lorempixel.com/g/480/207/" class="has_top_margin" />
    </div>
    <div id="col_right">
        <img src="http://lorempixel.com/g/220/205/" />
        <img src="http://lorempixel.com/g/220/270/" class="has_top_margin" />
    </div>
    <div style="clear:both"></div>
</div>

任何人都可以建议代码来完成这项工作吗？我不介意合并图像 1/2 和 3/4 如果它更容易......但它必须响应并且必须填充高度。

编辑：已更新 Fiddle

Answer 1

对，首先，尽量把CSS和HTML分开。内联 CSS 非常混乱，当您使用它时会导致不必要的问题。

The whole point of semantic HTML and CSS is to separate document structure and styling, so it just doesn’t make sense to go placing styling directly in the HTML document. Remember to always keep your styles in your stylesheet where they belong.

因此，您应该始终尝试在 <head> 标签中添加如下一行：

<link type="text/css" rel="stylesheet" href="/path/to/style.css">

对于页面本身，试试这个：

* {
  color: white;
  text-align:center;
}

#content, #sidebar_left, #sidebar_right {
  height:500px;
}

#sr1, #sl1, #sr2, #sl2 {
  height:100px;
  background:blue;
}

#sr1, #sl1 {
  height:30%;
  margin: 10px;
}

#sr2, #sl2 {
  height:70%;
  margin: 10px;
}

#c1{
  background:red;
  height:50%;
  margin:10px;
}

#c2 {
  background:blue;
  height:50%;
  margin:10px;
}

#sidebar_left {
  float:left;
  width:20%;
}

#content {
  width:60%;
  float:left;
}

#sidebar_right {
  float:left;
  width:20%;
}

<div id="page">
  <div id="sidebar_left">
        <div id="sl1">Column 1</div>
        <div id="sl2">Column 2</div>
  </div>
  <div id="content">
    <div id="c1">Video</div>
    <div id="c2">Column 5</div>
  </div>
  <div id="sidebar_right">
        <div id="sr1">Column 3</div>
        <div id="sr2">Column 4</div>
  </div>

</div>

JSFiddle!:

Here's a jsfiddle so you can play with the width.

编辑： 如果您正在使用 <img> 标签，请将以下内容添加到您的 CSS 并且图像底部不会有填充:

img {
    display: block;
}

Fiddle

Answer 2

感谢 Rizky 的帮助！

我已经 'cheated' 并使用背景图片来实现此功能...

HTML

<div class="homepage_container">
    <img src="/images/video_background.jpg" alt="" usemap="#links_map" />
    <map name="links_map">
        <area shape="rect" coords="0,225,220,496" href="/link1">
        <area shape="rect" coords="740,225,960,496" href="/link2">
    </map>
    <div class="homepage_video_container">
        <video id="example_video_1" class="video-js vjs-default-skin" poster="" data-setup='{"controls": false, "autoplay": true, "preload": "auto"}'>
            <source src="videofile.mp4" type="video/mp4" />
            <p class="vjs-no-js">To view this video please enable JavaScript, and consider upgrading to a web browser that <a href="http://videojs.com/html5-video-support/" target="_blank">supports HTML5 video</a></p>
        </video>
    </div>
</div>

CSS

.homepage_container {position:relative}
.homepage_video_container {position:absolute; top:0; left:25%; width:50%}

然后，使用插件使 HTML 和图像映射响应：https://github.com/videojs/video.js/ and https://github.com/stowball/jQuery-rwdImageMaps

我希望这对其他人有帮助...

响应式布局包括 HTML5 视频

Responsive Layout inc HTML5 video

html

css

responsive-design