Table of contents

Embeds

Create responsive video or slide-show embeds based on the width of the parent by creating an intrinsic ratio that scales on any device.

Rules are directly applied to <iframe>, <embed>, <video>, and <object> elements. To use this feature add embedding element to container with class .embed-container. Default size is a 16x9.


                    <div class="embed-container">
                        <iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
                    </div>
                

Aspect ratio

Aspect ratios can be customised with modifier classes. To change embeds size add one of size classes: .size-21x9, .size-16x9, .size-4x3, .size-1x1.

21x9


                    <!-- 21:9 aspect ratio -->
                    <div class="embed-container size-21x9">
                        <iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
                    </div>
                

16x9


                    <!-- 16:9 aspect ratio -->
                    <div class="embed-container size-16x9">
                        <iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
                    </div>
                

4x3


                    <!-- 4:3 aspect ratio -->
                    <div class="embed-container size-4x3">
                        <iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
                    </div>
                

1x1 (square)


                    <!-- 1:1 aspect ratio -->
                    <div class="embed-container size-1x1">
                        <iframe src="https://www.youtube.com/embed/BT59rohv6jw?rel=0" allowfullscreen></iframe>
                    </div>