如何防止iframe视频超出max-width＆amp;最大高度？

Question

我使用bootstrap嵌入了一个响应式YouTube视频。

我的目标：保持最大尺寸List<SelectListItem> listItems = new List<SelectListItem>(); listItems.Add(new SelectListItem { Text = row["ProgramName"].ToString().Trim(), Value = row["Id"].ToString().Trim(), Selected = valor }); 然后居中。

应该如何：https://avexdesigns.com/responsive-youtube-embed/

但它超越了这些限制，使视频非常模糊。

不应该如何：https://bomengeduld.github.io/mos-man2/

到目前为止，我尝试设置max-width＆amp; css中的最大高度，但它只调整宽度。

我在本规范中做错了什么？提前谢谢你清除它！

Answer 1

如果理解正确，你想要这样的东西：

＆＃13;

＆＃13;

<div class="container">

  <div class="child">

    <img src="https://s-media-cache-ak0.pinimg.com/736x/36/66/76/3666764312573a54adef888747d0c8f3.jpg" id="img1">


    <img src="https://s-media-cache-ak0.pinimg.com/736x/64/07/19/640719d42a8107720d760349fcfbbd52.jpg" id="img2">

  </div>

</div>

＆＃13;

#embed {
    height: auto;

    text-align: center;
    background: black;
    width: 100%; /* new */
    max-width: 560px; /* new */
    margin: 0 auto; /* new */
}


.videowrapper {
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}

.videowrapper iframe, .videowrapper object, .videowrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

＆＃13;

＆＃13;

＆＃13;