CODEWITHSUNDEEP
htmlcss
user5072259
user5072259

Reputation:

Video Padding issue

Hi guys I am currently having an issue here.

I have this page here: http://goo.gl/V0352s

enter image description here

Now my youtube video was cut off (its not even acting responsive) and I am trying to figure it out what might be the issue and how to solve it using CSS. i have the ff: HTML:

    <div style="width: 46%; float:left;height: 299px;">
    <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/h8NChiwfkFs?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen=""></iframe>
    </div>

<div style="float: right; width: 46%">
<h5>Description:</h5>
<p>Promotional Video for iLiveAccountable. A local life coaching and training company. Owned by Tony Beatty and Michael Gardner.</p>
<h5>Company</h5>
<p>iLiveAccountable</p>
<h5>Project Link</h5>
<p><a href="https://goo.gl/JZ0Hfw" target="_blank">https://goo.gl/JZ0Hfw</a>
</p></div>

You can try to right click inspect element on Chrome to check on this real time.

Thanks for the help in advance!

Upvotes: 0

Views: 53

Answers (1)

tao
tao

Reputation: 90113

Add this CSS:

@media (min-width: 768px) {
    .postid-146 iframe {
        height: 31.5vw;
        max-height: 315px;
    }
}

After several failed attempts to make this work responsively, I made a script that resizes the iframe based on its set width and height attributes, and the actual width:

jQuery(document).ready(function($) {
  $(window).on('load resize', function() {
    $('iframe').each(function() {
      $(this).css({
        'height': ($(this).attr('height') * $(this).width() / $(this).attr('width')) + 'px'
      });
    })
  });
});

Upvotes: 2

Related Questions