Bootstrap responsive 9by16

Question

I am trying to provide a 'draw space' that is 16x9, but I want the user to be able to choose portrait or landscape orientation. I am already using class="embed-responsive embed-responsive-16by9". Is there an easy way to make the change using CSS?

Edit

Keep in mind that I will be adding divs into these containers. Their position within the 16x9 container should be relative to it's orientation as I wish to save the user's drawspace in order to re-create it.

Answer 1

I wanted to use 16by9 and 9by16 for fullscreen iFrames with possibility to switch between portrait and landscape. With Bootstrap4 and SCSS just add

// 21/9 - 9/21
@media screen and (orientation:portrait) {
    .embed-responsive-21by9-rotating {
        padding-bottom: percentage(21 / 9); // 233.3333333333%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-21by9-rotating {
        padding-bottom: percentage(9 / 21); // 42.8571428571%
    }
}
// 16/9 - 9/16
@media screen and (orientation:portrait) {
    .embed-responsive-16by9-rotating {
        padding-bottom: percentage(16 / 9); // 177.7777777778%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-16by9-rotating {
        padding-bottom: percentage(9 / 16); // 56.25%
    }
}
// 4/3 - 3/4
@media screen and (orientation:portrait) {
    .embed-responsive-4by3-rotating {
        padding-bottom: percentage(4 / 3); // 133.3333333333%
    }
}
@media screen and (orientation:landscape) {
    .embed-responsive-4by3-rotating {
        padding-bottom: percentage(3 / 4); // 75%
    }
}

...and use embed-responsive-[n]by[m]-rotating as class name of the aspect ratio.