html - 介绍页面中的响应式图像和视频

Question

我正在设计一个介绍页面。我在那个页面上放置了一个背景和视频片段，我也想在移动设备上获得桌面 View 。我尝试了以下代码:

CSS:

.trailer-content {
    max-width: 75%;
    width: 600px;
    margin-left: auto;
    margin-right: auto;

}
.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
}
.video-container iframe,
.video-container object,
.video-container embed {
    position: fixed;
    bottom:40px !important;
    width: 50%;
    height: 50%;
    margin-left: auto !important;
    margin-right: auto !important;
}
#background {
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0px;
    top: 0px;
    z-index: -1; /* Ensure div tag stays behind content; -999 might work, too. */
}
.stretch {
    width:100%;
    height:100%;
}

html:

<div id="background">
     <img src="img/bg.jpg" class="stretch" alt="" />
</div>
<div class="trailer-content">
     <div class="video-container"><iframe width="420" height="315"     src="//www.youtube.com/" frameborder="0" allowfullscreen></iframe>
     </div>
</div>

输出结果

1. 背景看起来被拉伸(stretch)了

2. 桌面端视频正常，但移动端视频也被拉长了一些。

Answer 1

响应式背景图片:

html { 
  background: url(https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcSvctt0I--skoKQVfuVt-i4Et6vQ5ve7lXPkLy9sTElCWLKh1Ps) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
}

See demo

响应式视频:

HTML:

<div class="videoWrapper">
    <!-- Copy & Pasted from YouTube -->
    <iframe width="560" height="349" src="http://www.youtube.com/embed/n_dZNLr2cME?rel=0&hd=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%;
}

See demo