0

Within Youtube the html to embed a video is of the form 

    <iframe width="560" height="315" src="https://www.youtube.com/embed/6Es-eaG4xPg" 
frameborder="0" allowfullscreen></iframe>

but of course with trying to make pages mobile compatible there will be a problem when screensize less than 560 in width.

So I changed my code to

 <iframe class="screencast" src="https://www.youtube.com/embed/6Es-eaG4xPg" 
frameborder="0" allowfullscreen></iframe>

and in stylesheet had

.screencast {
     width=560
     height=315
}

the idea being i could have different sections for different media widths

i.e 

@media screen and (min-width:300px) and (max-width: 499px) {
    .screencast {
         width=280
         height=158
    }

But this had no effect at all the video was now always shown on the screen too small and its size never changed it seems to be ignoring the css class

Then I found this question

Shrink a YouTube video to responsive width

which requires a div to be added round the frame

e.g

<div class="videowrapper">
<iframe src="https://www.youtube.com/embed/9Cf_xEbUzqE" n allowfullscreen></iframe>
</div>

and then this added to the css

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

This works except it makes the video take up the full width which I dont want, I can change the width

e.g

  .videowrapper iframe {
      position: absolute;
      width: 50%;
      height: 50%;
  }

and that works except it doesnt horizontally centre the video

I have tried various things such as 

  .videowrapper iframe {
      position: absolute;
      left: 25%
      width: 50%;
      height: 50%;
  }

but nothing I have done has centered the image, how can I resolve this, and why didn't my simple approach of putting a class on the iframe have any effect.

Community
  • 1
  • 1
Paul Taylor
  • 13,411
  • 42
  • 184
  • 351

1 Answers1

0

You can use this code

.video_center iframe{ margin: 0 auto; display:table; }

Bal mukund kumar
  • 353
  • 2
  • 7
  • HI thanks that does basically work (and so much simpler) however if I add width:80%; height:80%; it only respects the width parameter the height never changes. Where if I hardcode width:300px; width 500px; it does work but then I have to code different widths for different media screens – Paul Taylor Jan 25 '17 at 12:18
  • the other issue is that it is not totally centred, if you look at these two videos on http://www.jthink.net/songkong/duplicates.jsp they are not aligned, seems to depend on the text/image above – Paul Taylor Jan 25 '17 at 12:25