CODEWITHSUNDEEP
htmlcssiframe
ysrfaith
ysrfaith

Reputation: 35

youtube height and width on iframe wont work

So i followed this video tutorial to make my iframe video responsive to mobile or any other device

https://www.youtube.com/watch?v=X4t0JxiBeO0

and they have said to add this to the iframe code

<div class="iframe-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
</iframe></div>

after doing this, they said to add the following code

.iframe-container {
max-width: 100%;
height: 0;
margin-top: 60px;
padding-bottom: 56.25%;
position: relative;
}

.iframe-container iframe {
position: absolute;
margin-left: auto;
margin-right: auto;
left: 0;
right: 0;
width: 100%;
height: 100%;
}

Now the only issue that I have is that the width and height in the iframe html code doesnt seem to work and its covering 100% of the width and not using the width and height I assigned it to turn into, but it is responsive but I want it to be smaller and not as big

now I have tried everything such as increasing and decreasing the padding bottom and all of that, but it doesnt seem to work. Is there a fix to this?

Upvotes: 0

Views: 732

Answers (1)

user11072506
user11072506

Reputation:

Sorry for previous answer.

I would do this by adding second container.

<div class="iframe-container">

   <div class="iframe-container-2">
      <iframe src="https://www.youtube.com/embed/Bey4XXJAqS8" frameborder="0"
         allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
   </div>

</div>

.iframe-container {
   width: 500px;
}

.iframe-container-2 {
   position: relative;
   width: 100%;
   height: 0;
   padding-bottom: 56.25%;
}

iframe {
   position: absolute;
   width: 100%;
   height: 100%;
   left: 0;
   top: 0;
}

Upvotes: 1

Related Questions