How to make the height of the YouTube video block determined by the screen size?

Question

YouTube

There is a block with a looped video from YouTube Fiddle

<iframe class="inner" frameborder="0" allowfullscreen="1" title="YouTube video player" width="100%" height="100%" src="https://www.youtube.com/embed/TP1U4fySrCI?playlist=TP1U4fySrCI&iv_load_policy=3&enablejsapi=1&disablekb=1&autoplay=1&controls=0&showinfo=0&rel=0&loop=1&wmode=transparent&origin=http%3A%2F%2Flike2.likemedia.by&widgetid=1"
      id="widget2" style="max-width: 1000%;  width: 100%; height: 785.25px;"></iframe>

How to make sure that depending on the screen resolution, the height adjusts itself, the picture is not cut off and black bars do not appear?

Answer 1

fitvids
This is if you don’t write anything at all
Otherwise, you need a wrapper over the YouTube video frame with a css hack

.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%;
}

Answer 2

Don't do it at all. You can get creative and make the iframe something like background-size: cover using absolute positioning and transformations

Answer 3

So height: 785.25px;it's fixed for you.