Embed Videos

Videos

Use generated pseudo elements to make an element maintain the aspect ratio of your choosing. Perfect for responsively handling video or slideshow embeds based on the width of the parent.

Ratios on Bootstrap

Responsive embed video 21:9

                                        
                                            <div class="ratio ratio-21x9">
                                                <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
                                            </div>

Responsive embed video 1:1

                                        
                                            <div class="ratio ratio-1x1">
                                                <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
                                            </div>

Responsive embed video 16:9

                                        
                                            <div class="ratio ratio-16x9">
                                                <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
                                            </div>

Responsive embed video 4:3

                                        
                                            <div class="ratio ratio-4x3">
                                                <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?autohide=0&showinfo=0&controls=0"></iframe>
                                            </div>