1. Hyper
  2. Base UI
  3. Embed Video

Embed Video

Responsive embed video 21:9

Use class .ratio-21x9

                                                    
                                                        <!-- 21:9 aspect ratio -->
                                                        <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

Use class .ratio-1x1

                                                    
                                                        <!-- 1:1 aspect ratio -->
                                                        <div class="ratio ratio-1x1">
                                                            <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?ecver=1"></iframe>
                                                        </div>

Responsive embed video 16:9

Use class .ratio-16x9

                                                    
                                                        <!-- 16:9 aspect ratio -->
                                                        <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

Use class .ratio-4x3

                                                    
                                                        <!-- 4:3 aspect ratio -->
                                                        <div class="ratio ratio-4x3">
                                                            <iframe src="https://www.youtube.com/embed/PrUxWZiQfy4?ecver=1"></iframe>
                                                        </div>
Settings
Color Scheme
Width
Purchase Now