.viewer-fullscreen { position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; user-select: none; } .viewer-fullscreen.active { pointer-events: auto; user-select: auto; } /* transitions */ .viewer-fullscreen .fade-enter { opacity: 0; } .viewer-fullscreen .fade-enter.fade-enter-active { opacity: 1; transition-property: opacity; } .viewer-fullscreen .fade-exit { opacity: 1; } .viewer-fullscreen .fade-exit-active { opacity: 0; transition-property: opacity; } /* elements */ .viewer-fullscreen .fullscreen-element { position: absolute; width: 100%; height: 100%; top: 0; left: 0; display: flex; align-items: center; justify-content: center; } .viewer-fullscreen .curtain { } .viewer-fullscreen .image div { width: 90%; height: 90%; background-size: contain; background-repeat: no-repeat; background-position: center center; } /* video */ .viewer-fullscreen .video { pointer-events: none; align-items: flex-start; } iframe { pointer-events: none; } .viewer-fullscreen .video > div { pointer-events: none; width: 100%; height: calc(100vh) !important; padding: 0 0 3rem 0 } .viewer-fullscreen .video > div div { width: 100%; height: 100%; padding: 0 !important; }