Mural icon indicating copy to clipboard operation
Mural copied to clipboard

Add option for full-width videos when the browser is in portrait mode

Open muraldouglas opened this issue 5 years ago • 1 comments

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>

muraldouglas avatar Jul 01 '19 17:07 muraldouglas

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.

naomiaro avatar Oct 08 '19 20:10 naomiaro