Responsive images and video in intro page

Question

I am designing an intro page. I place a background and video piece on that page and also I want to get the view of desktop in mobile also. i tried the following code:

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>

Output result

1. the background appears stretched

2. the video is normal in desktop but in mobile view, the video is also stretched to some size.

Answer 1

Responsive background image:

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

Responsive video:

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

Answer 2

And again I must notice never use ID for styling

To resolve your case properly

Easiest way is to use @media rule w3school link

In that case you'll have any number of diffirent rules that applies to the same class but in diffirent situations.

That way is much better than just stretch video or backgrounds, because you'll have full control of all elements. They'll behave as you want them to behave at diffirent devices.

Answer 3

remove height:100% from #background... so the image will stretch 100% in width, but keep the right dimensions.

However, I think is better you put it as a background in the body like this:

body{background:url(img/bg.jpg);
background-repeat:no-repeat;
background-size:100% auto;}

For the video frame tags that holds videos, remeoving the height might scale the video properly as well.

You can also set specific width, height etc by using meidatypes, see more information about responsive webdesign (RWD) here http://www.hongkiat.com/blog/responsive-web-tutorials/