1

I'm working on making a mobile version for the landing page of my game. I have a youtube trailer in it which should scale according to the website size while keeping centered. But it don't. You can see yourself on my website http://www.zatackaonline.net by scaling the browser size down.

I tried using this code which I found on another post on StackOverflow. This code will instead fill the whole screen which I don't want it to. Is there any way I could shrink it to be 50% size while keeping the embeded iFrame video position centered?

/*main.css*/

.video-container { 
position: relative; /* keeps the aspect ratio */ 
padding-bottom: 56%; /* fine tunes the video positioning */ 
padding-top: 60px; 
overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;

}
user3534757
  • 161
  • 1
  • 10
  • possible duplicate of [Shrink a Youtube video to responsive width](http://stackoverflow.com/questions/15844500/shrink-a-youtube-video-to-responsive-width) – davidcondrey Oct 04 '14 at 23:57

3 Answers3

3

First of all, to get the iframe to the correct width without changing your code too much, you could use the vw unit (here's some info on viewport units):

#contentframe iframe{
    width:50vw;
}

Secondly, to center the container, set the margin-left and margin-right values to auto, and specify its width:

#contentframe{
    /* left:294px */ // REMOVE
    width: 50vw;
    margin-left:auto;
    margin-right:auto;
}

Remember to wrap all this in the right media query and it should do the trick!

Edit About the left:294px: I find it becomes confusing when trying to use these absolute values in responsive websites, maybe using percentage values as much as possible will make things easier for you.

Edit 2 Here's a working fiddle: http://jsfiddle.net/EB57H/1/

Edit 3 To keep the ratio while resizing, remove the width and height attribute from the iframe source: http://jsfiddle.net/EB57H/2/

<iframe width=560" height="315" src="...
// BECOMES
<iframe src="...

That wasn't working well, here's another not very elegant solution.

Sir Celsius
  • 822
  • 8
  • 22
  • Thanks, but how can I make the height of the video also scale when resizing? – user3534757 Jul 28 '14 at 12:27
  • 1
    I updated my answer with a little more help. There is another technique if your video is embedded dynamically [here](http://stackoverflow.com/questions/11122249/scale-iframe-css-width-100-like-an-image) – Sir Celsius Jul 28 '14 at 12:37
  • Thanks, If I want it bigger then.. How can I make that? :) – user3534757 Jul 28 '14 at 12:46
  • Thank you, I fixed it. Just changed vw to 60 and 60 :) – user3534757 Jul 28 '14 at 12:54
  • 1
    With this, you can programmatically set the height for the iframe: http://jsfiddle.net/EB57H/3/ – Sir Celsius Jul 28 '14 at 13:04
  • Thanks! would upvote 100x times if i could :) Why you say it's not elegant? – user3534757 Jul 28 '14 at 13:40
  • Glad I could be of help :) It's not elegant because in the example you have to set the 50/60/70vw values manually three times to change it. There would probably be a *sexier* way to do this with a touch more thinking! – Sir Celsius Jul 28 '14 at 13:52
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/58227/discussion-between-sir-celsius-and-user3534757). – Sir Celsius Jul 29 '14 at 08:54
1

Instead of : 

left:594px;

Use :

text-align:center;

In the contentframe css style

For the responsive size, remove height and width from the <iframe> and add the css rule width:80% for example to the iframe

singe3
  • 2,065
  • 4
  • 30
  • 48
  • I did what you say and added this:
    . This will center it but the video will not resize. Am I'm doing something wrong?
     – user3534757 Jul 28 '14 at 12:19
0

I mixed all the answers to build an optimized solution, with center, responsive and max-height to avoid the video to take all the page if on a wide screen.

CSS:

.video-container {
  width: 70vw;
  max-width: 560px ;
  margin:auto;
}

.video-container iframe,
.video-container object,
.video-container embed {
  width: 70vw;
  max-width: 560px ;
  height:calc((9/16)*70vw);
  max-height:calc((9/16)*560px);
}

HTML:

  <div class="video-container">
    <iframe
      width="853"
      height="480"
      src="https://www.youtube.com/embed/4JkIs37a2JE"
      frameborder="0"
      allowfullscreen
    ></iframe>
  </div>
Nicolas Vuillamy
  • 564
  • 7
  • 14