Table of contents

Embeds

Create responsive video or slideshow 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. 


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

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

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

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