BLOG

test

Your version
My version
I have set a max-size in the first class to limit the size height will be automatic and removed the border in the second class you do not really need the frameborder width and height settings in the iframe code 
<style>
/* This element defines the size the iframe will take.
       In this example we want to have a ratio of 25:14 */
    .aspect-ratio {
      position: relative;
      width: 100%;
      max-width:550px;
      height: 0;
      padding-bottom: 56%; /* The height of the item will now be 56% of the width. */
    }

    /* Adjust the iframe so it's rendered in the outer-width and outer-height of it's parent */
    .aspect-ratio iframe {
      position: absolute;
      width: 100%;
      height: 100%;
      border:0;
      left: 0;
      top: 0;
    }
</style>
 <div class="aspect-ratio">
<iframe src="http://youtube.com/embed/uf5HbvbPN0o?rel=0" allowfullscreen ="allowfullscreen"></iframe>
</div>
Created at 2018-07-03
0 Rate up Star
Back to posts
This post has no comments - be the first one!

w3-half


Ring ring