使用iframe响应youtube视频

Question

我在html中有一个以下iframe，其中包含youtube视频。这是iframe：

    Comparator<Etat> comparator = new Comparator<Etat>() {
        @Override
        public int compare(Etat o1, Etat o2) {
            return o1.getDateEtat().compareTo(o2.getDateEtat());
        }
    };

    for (Commande c : commandes) {
        Collections.sort(c.getEtatList(), comparator);
        // or this one: Collections.sort(c.getEtatList(), Collections.reverseOrder(comparator));
    }

如何让这个iframe响应？

Answer 1

您可以使用固有比率。包含元素具有响应性并保持特定的宽高比。内部的iframe绝对定位于此元素。

HTML

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>
</div>

CSS

.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

有关CSS Tricks

的更多信息

Answer 2

把它放在你的风格中。

http://jsfiddle.net/wbjkuwym/

iframe, object, embed {
        max-width: 100%;
}

Answer 3

＆＃13;

＆＃13;

div {
    position: relative;
    padding-bottom: 75%; /*315/420=0.75*/
    height: 0;
    overflow: hidden;
}
div iframe{
    position: absolute; top: 0; left: 0;
    width: 100%;
    height: 100%;
}

＆＃13;

<div>
<iframe width="420" height="315" src="https://www.youtube.com/embed/DgPO56ImqUA?showinfo=1" frameborder="0" allowfullscreen></iframe>
</div>

＆＃13;

＆＃13;

＆＃13;