html - CSS:IFrame 没有响应，我有一个媒体间隙

Question

2015 年 3 月 9 日更新:

请看 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"... 重叠。并且“溢出”到屏幕之外(向右)。
  *同上 *

• 已修复我想将表格的大小“限制”为最大 1000 像素，并在该点之后将屏幕居中。
  * 使用 @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/

祝你好运。