1

Im making my first web app and im trying to put some iframes with youtube videos on it, the thing is, when i pasted the embed code from youtube, it was too big to the point that it took the entire screen, so i resized it. But now the interface is too big for the size and looks bad. How can i make the interface adaptive to the size? pic related

Thank you.

tiago
  • 11
  • 1
  • 2

2 Answers2

3

You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.

<style>
.yt {
  position: relative;
  display: block;
  width: 90%; /* width of iframe wrapper */
  height: 0;
  margin: auto;
  padding: 0% 0% 56.25%; /* 16:9 ratio */
  overflow: hidden;
}
.yt iframe {
  position: absolute;
  top: 0; bottom: 0; left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
</style>

<div class="yt">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>
bron
  • 1,457
  • 1
  • 9
  • 18
0

you can but it inside parent container which will control it's size and make the size of your iframe 100% look here:

Make Iframe to fit 100% of container's remaining height

ahmed abubaker
  • 113
  • 3