Mural
Mural copied to clipboard
Add option for full-width videos when the browser is in portrait mode
Users should have the ability to select whether they want to have videos full-height (as we have had so far) or full-width (as has been requested by our client). If the user selects full-width video, the width is set to the width of the browser, and the height is the height of the video. This will result in unused space above and below the video, but at least the entire video can be seen.
To achieve this, the following code will be useful:
<style>
@media (orientation:portrait) {
section[name="story9"] {
background: #000;
z-index: 1;
}
section[name="story9"] .video-container {
margin-left: 0;
}
section[name="story9"] .part {
min-height: auto!important;
}
section[name="story9"] .caption {
padding-top: 50vh!important;
padding-bottom: 0!important;
}
section[name="story9"] video {
height: auto!important;
min-height: auto!important;
min-width: 100vw!important;
max-width: 100vw!important;
width: 100vw!important;
}
}
</style>
I propose to have separate items now for original landscape video vs original portrait video coming up. Then in all screen sizes they will stay landscape or portrait.