.slideshow-info, .slideshow-docs { position: absolute; padding: 5px 10px; background: rgba(0,0,0,.8); color: #fff; visibility: hidden; } .slideshow-docs { right: 0; text-align: right; } .slideshow-docs span { display: block; } .slideshow-wrapper { width:100%; height:100vh; overflow: hidden; background-position: center; background-size: contain; background-repeat: no-repeat; } .slideshow-wrapper video { object-fit: contain; width:100%; height:100%; } #slideshow-next, #slideshow-prev { position: absolute; top: 70px; width: 40px; text-align: center; font-size: 2em; height: calc(100vh - 70px); background: rgba(0,0,0,.2); border: none; color: #fff; z-index: 10; } #slideshow-next.hidden, #slideshow-prev.hidden,#slideshow-autoplay.hidden { display: none; } #slideshow-autoplay { position: absolute; bottom: 5px; text-align: center; font-size: 2em; width: 5em; left: calc(50% - 2.5em); background: transparent; border: none; color: #fff; z-index: 10; } #slideshow-autoplay:focus { outline: 2px solid #fff; } #slideshow-next:focus, #slideshow-prev:focus { border: none; color: lime; outline: none; } #slideshow-next { right: 0; } .slideshow-wrapper[data-loaded=false]::after { content: ''; /* loading <- Textanzeige */ position: absolute; top: 3em; background: rgba(0,0,0,.8); padding: 5px 10px; font-size: 1.5em; z-index:10; color: #fff; transition: 200ms; }