CSS：IFrame没有响应，我有媒体差距

Question

更新于03-09-2015：

请查看 http://jsfiddle.net/omarjuvera/9kkocc82/6/
http://jsfiddle.net/omarjuvera/9kkocc82/11/

我有几个问题：

• （MEDIA GAP）大约在像素617和550之间（不确定精确测量），列移动到单列;这个行为没问题。但是，宽度不是100％。两者之间存在差距，它不会调整为100％/或至少我希望<div class="cell" ...垂直对齐到中心。

• 已修复 IFrame未按屏幕尺寸正确调整大小。
  * 我只需将max-width: 100%;添加到iframe *

• 已修复 2列的工作正常。不完美，但至少他们工作。但是，在某个屏幕尺寸之后，IFrame开始与<div class="table"...和＆＃34;溢出＆＃34;重叠。屏幕外侧（右侧）。
  * 与上述相同 *

• 已修复 我想＆＃34; cap＆＃34;表的大小最大为1000px，并在该点之后使屏幕居中。
  * 使用@media only screen and (min-width: 1000px) {... *

HTML：

<!-- video -->
<div class="table">
    <section class="cell">
        <h3>This is a really super long title in comparison to other videos. A really long title</h3>
        <p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</p>
        <h4>Author: John Doe</h4>
    </section>
    <div class="cell">
        <div class="video">
        <iframe 
            title="Incredible Singing Cat" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
        </div>
    </div>
</div>

<!-- video -->
<div class="table">
    <div class="cell">
        <h3>Short title</h3>
        <p>Short blah... Short blah... </p>
        <h4>Author: John Doe</h4>
    </div>
    <div class="cell">
        <div class="video">
        <iframe 
            title="Another car video?!" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
        </div>
    </div>
</div>

<!-- video -->
<div class="table">
    <div class="cell">
        <h3>Not so long title, not so short either...medim size.</h3>
        <p>Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah...</p>
        <h4>Author: John Doe</h4>
    </div>
    <div class="cell">
        <div class="video">
        <iframe 
            title="Ophera at home" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
        </div>
    </div>
</div>

<!-- video -->
<div class="table">
    <div class="cell">
        <h3>Some other type of title</h3>
        <p>Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... </p>
        <h4>Author: John Doe</h4>
    </div>
    <div class="cell">
        <div class="video">
        <iframe 
            title="Living with a cat" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
        </div>
    </div>
</div>

<!-- video -->
<div class="table">
    <div class="cell">
        <h3>What is my title?</h3>
        <p>blah... blah... blah... blah... blah... </p>
        <h4>Author: John Doe</h4>
    </div>
    <div class="cell">
        <div class="video">
        <iframe 
            title="I am a dog person" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
        </div>
    </div>
</div>

<!-- video -->
<div class="table">
    <div class="cell">
        <h3>Whateber title</h3>
        <p>blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...</p>
        <h4>Author: John Doe</h4>
    </div>
    <div class="cell">
        <iframe  class="video"
            title="Can you sing?!" 
            class="youtube-player" 
            width="340" 
            height="250" 
            src="//www.youtube.com/embed/9fSde2DD8YQ"
            allowfullscreen>
        </iframe>
    </div>
</div>

CSS：

.table {
    position: relative;
    width: 100%;
    padding: 0%;
    margin-bottom: 1.5em;
    border: solid black 2px; /* for testing */
}
.cell {
    vertical-align: text-top;
    width: 47%;
    border: solid red 2px; /* for testing */
    display: inline-block;
    padding: 0em;
    margin: 1%;
}

.video {
    text-align: center;
}

/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
@media only screen and (max-width: 610px) {
    .cell { 
        width: 99%;
        margin: 0%;
        padding: 0%;
    }

    .video {
        height: 100%;
        width: 100%;
}

@media only screen and (min-width: 1000px) {
    .table {
        margin: auto;
        width: 1000px;
    }
}

Answer 1

此答案仅针对（MEDIA GAP），因为它是唯一尚未修复的项目。

有很多方法可以实现这一点，但我喜欢表格 - 表格方式。

我创建了一个jsfiddle。代码可以使用一些清理，但它适用于更现代的浏览器。你想要支持多久了？

http://jsfiddle.net/whoacowboy/9kkocc82/13/

CSS

html, body {
        width:100%;    
    }
    .table {
        width: 100%;
        padding: 0%;
        margin:0 0 1.5em 0;
        background-color:rgba(0,255,255,.2); /* for testing */
        display:table;
    }
    .cell {
        vertical-align: top;
        width:50%;
        background-color:rgba(0,0,255,.2); /* for testing */
        display: table-cell;
        padding: 0;
        margin:0 !important;
        -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
        -moz-box-sizing: border-box;    /* Firefox, other Gecko */
        box-sizing: border-box;         /* Opera/IE 8+ */
    }
    .cell:first-child {
        padding-right:10px;

    }
    .video {
        text-align: center;
        margin:0 auto;
        background-color:black;
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 30px; height: 0; overflow: hidden;
    }
    .video iframe,
    .video object,
    .video embed {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    iframe {
        max-width: 100%;
    }

    /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ 
    @media only screen and (max-width: 610px) {
        .cell { 
            width: 100% !important;
            margin: 0%;
            padding: 0%;
            display:block;
        }
        .table {
            display:block;
        }
        .video {
            height: 100%;
            width: 100%;
        }
    }

    @media only screen and (min-width: 1000px) {
        .table {
            margin: auto;
            width: 1000px;
        }
    }

通过快速搜索，您可以通过多种方式获得youtube iframe的响应速度。

我使用了这种技术。

http://avexdesigns.com/responsive-youtube-embed/

祝你好运。

Answer 2

关于iframe的第一点你需要宽度为100％而不是固定的px数。 注意宽度

<iframe title="Incredible Singing Cat" class="youtube-player" width="100% height="250px" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>

第二个和第三个是由于css默认浏览器实现或者他们称之为“{3}}”，这将删除从浏览器继承的任何样式。

第四个你可以使用媒体查询在1000px min-width之后触发在demo中看到。

@media screen and (min-width=1000px) {
        .table {
            width:1000px;
        }
    }

CSS reset

＆＃13;

＆＃13;

/** * Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/) * http://cssreset.com */
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}
body {
    line-height: 1;
}
ol, ul {
    list-style: none;
}
blockquote, q {
    quotes: none;
}
blockquote:before, blockquote:after, q:before, q:after {
    content:'';
    content: none;
}
table {
    border-collapse: collapse;
    border-spacing: 0;
}
.table {
    position: relative;
    width: 100%;
    padding: 0%;
    margin-bottom: 1.5em;
    border: solid black 2px;
    /* for testing */
}
@media screen and (min-width=1000px) {
    .table {
        width:1000px;
    }
}
.cell {
    vertical-align: text-top;
    width: 47%;
    border: solid red 2px;
    /* for testing */
    display: inline-block;
    padding: 0em;
    margin: 1%;
}
.video {
    text-align: center;
}
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */
 @media only screen and (max-width: 610px) {
    .cell {
        width: 99%;
        margin: 0%;
        padding: 0%;
    }
    .video {
        height: 100%;
        width: 100%;
    }
}
@media only screen and (min-width: 1000px) {
    .table {
        margin: auto;
        width: 1000px;
    }
}

＆＃13;

<!-- video -->
<div class="table">
    <section class="cell">
        	<h3>This is a really super long title in comparison to other videos. A really long title</h3>

        <p>Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah... Blah...</p>
        	<h4>Author: John Doe</h4>

    </section>
    <div class="cell">
        <div class="video">
            <iframe title="Incredible Singing Cat" class="youtube-player" width="100%" height="250px" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- video -->
<div class="table">
    <div class="cell">
        	<h3>Short title</h3>

        <p>Short blah... Short blah...</p>
        	<h4>Author: John Doe</h4>

    </div>
    <div class="cell">
        <div class="video">
            <iframe title="Another car video?!" class="youtube-player" width="100%" height="250" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- video -->
<div class="table">
    <div class="cell">
        	<h3>Not so long title, not so short either...medim size.</h3>

        <p>Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah... Medium blah...</p>
        	<h4>Author: John Doe</h4>

    </div>
    <div class="cell">
        <div class="video">
            <iframe title="Ophera at home" class="youtube-player" width="100%" height="250" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- video -->
<div class="table">
    <div class="cell">
        	<h3>Some other type of title</h3>

        <p>Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!... Meh!...</p>
        	<h4>Author: John Doe</h4>

    </div>
    <div class="cell">
        <div class="video">
            <iframe title="Living with a cat" class="youtube-player" width="100%" height="250" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- video -->
<div class="table">
    <div class="cell">
        	<h3>What is my title?</h3>

        <p>blah... blah... blah... blah... blah...</p>
        	<h4>Author: John Doe</h4>

    </div>
    <div class="cell">
        <div class="video">
            <iframe title="I am a dog person" class="youtube-player" width="100%" height="250" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
        </div>
    </div>
</div>
<!-- video -->
<div class="table">
    <div class="cell">
        	<h3>Whateber title</h3>

        <p>blah... blah... blah... blah... blah... blah... blah... blah... blah... blah... blah...</p>
        	<h4>Author: John Doe</h4>

    </div>
    <div class="cell">
        <iframe class="video" title="Can you sing?!" class="youtube-player" width="100%" height="250" src="//www.youtube.com/embed/9fSde2DD8YQ" allowfullscreen></iframe>
    </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

<style>
.frame{
width:960px; // set as per responsive stylesheet
}
</style>
<div class="frame">
<iframe title="frame_title" class="player" width="100% height="coatent_height" src="//www.yoursite.com/" allowfullscreen></iframe>
</div>

Answer 4

我尝试了一种方式，似乎有效。只需将.video的宽度设置为100％，不要指定高度。然后将iframe的宽度更改为“inherit”，将height更改为“auto”。不知道这是有效还是跨浏览器兼容。但是，对我来说似乎很好。

.video {
    width: 100%;
}

iframe {
    width: inherit;
    height: auto;
}

如果我的方法错误或容易出错，请纠正我。

Answer 5

关于最后一点未修复：

  

（MEDIA GAP）大约在像素617和550之间（不确定   精确测量），柱子移动到一列;这个   行为还可以。但是，宽度不是100％。中间存在差距   介于两者之间并且它至少不会重新调整为100％/ OR

那时候，专栏并没有真正进入一个专栏，对比赛还没有任何疑问。事实上你的元素内联块没有足够的空间仍然在同一行，所以它们只是叠加（因为它假设发生）。我发现自己使用尺寸非常危险＆＃34;％＆＃34;并使用内联块元素保证浮动，因为有时难以处理的内联块元素之间始终存在间隙。

此外，我建议您始终使用box-sizing: border-box;

在你的小提琴中，我只是在你的＆＃34;细胞中添加了一个盒子。所以这些临时边界不会占用单元格的空间（这是内联块元素在时间之前跳跃的另一个原因）。

然后，如果你的单元格有1％的边距...你的单元格宽度可能是48％(1%+48+1%+1%+48+1%=100%)但是正如我上面提到的内联阻挡元素在它们之间需要额外的空间我将单元格的宽度设置为＆＃34; 47.5％＆＃34;这足以防止早跳。

在这里查看并原谅我可怜的英语： FIDDLE

Answer 6

我发现在CSS中垂直对齐东西的最佳/最简单方法是使用flexbox。 CSS-Tricks complete guide to Flexbox

以下是我对垂直对齐的CSS的修改。我还使用了边框，边距：0和填充：0和宽度：50％以消除间隙。

.table {
  position: relative;
  width: 100%;
  padding: 0%;
  margin-bottom: 1.5em;
  border: solid black 2px;
  /* for testing */
  display: -webkit-flexbox;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;
  -webkit-flex-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  text-align: center;
}
.cell {
  -webkit-box-sizing: border-box;
  /* Safari/Chrome, other WebKit */
  -moz-box-sizing: border-box;
  /* Firefox, other Gecko */
  box-sizing: border-box;
  width: 50%;
  margin: 0;
  border: solid red 2px;
  /* for testing */
  display: inline-block;
  padding: 0;
}
.video {
  text-align: center;
}
iframe {
  max-width: 100%;
}
/* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */

@media only screen and (max-width: 610px) {
  .cell {
    width: 99%;
    margin: 0%;
    padding: 0%;
  }
  .video {
    height: 100%;
    width: 100%;
  }
}
@media only screen and (min-width: 1000px) {
  .table {
    margin: auto;
    width: 1000px;
  }
}