How to show multiple video in a single div with different sizes

Question

Hello Team, Can anyone guide me on showing multiple videos in a single div with different sizes?

Sachin Singh · Answer

had some typo now test .container1 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } class = "row" > class = "col-md-8" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "col-md-4" > class = "row" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "row" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > make sure to add bootstrap css cdn.

Sachin Singh · Answer

This way .container1 { position: relative; overflow: hidden; width: 100%; padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */ } /* Then style the iframe to fit in the container div with full height and width */ .responsive-iframe { position: absolute; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; } class = "Row" > class = "Col-md-8" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "col-md-4" > class = "row" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > class = "row" > class = "container1" > class = "responsive-iframe" src= "https://www.youtube.com/embed/tgbNymZ7vqY" > I have used bootstrap along with some css to make iframes responsive.

Sam · Answer

Sachin, This is not working..

How to show multiple video in a single div with different sizes

Answers (3)