Skip to content

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

Open
@muraldouglas

Description

@muraldouglas

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>

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions