.wrapper-video { max-width: 720px; } .responsive-video { height: 0; overflow: hidden; padding-bottom: 56.25%; padding-top: 0; position: relative; text-align: center; } .responsive-video iframe { height: 100%; left: 0; position: absolute; top: 0; width: 100%; border-radius: 8px; } /*XL*/ @media (min-width: 1168px) { } /*LG*/ @media (min-width: 740px) { .wrapper-video { max-width: 720px; } } /*Vor 560px: SM ; Danach: MD*/ @media (min-width: 560px) { .wrapper-video { max-width: 739px; } .video-wall, iframe[data-src] { min-height: 260px; } } /* Nur Auflösungen bis SM */ @media (max-width: 559px) { .wrapper-video { max-width: 559px; } .video-wall, iframe[data-src] { min-height: 200px; } .video-wall p { font-size: 14px; margin-top: 0; margin-bottom: 20px; } } iframe { display: inline-block; } iframe[data-src] { background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg"><text text-anchor="middle" alignment-baseline="central" y="50%" font-size="1em" fill="black"><tspan x="50%" dy="-1.5em">Dieses Video kann nur mit</tspan><tspan x="50%" dy="1.5em">aktiviertem JavaScript</tspan><tspan x="50%" dy="1.5em">abgespielt werden</tspan></text></svg>'); } .video-wall, iframe[data-src] { width: 100%; min-height: 300px; margin: 0; border-radius: 8px; box-sizing: border-box; box-shadow: inset 0 0 0 1000px var(--itzehoer-green-image-overlay); display: flex; flex-direction: column; flex-wrap: nowrap; align-content: center; justify-content: center; align-items: center; } .video-wall h4 { display: block; text-align: center; color: white; margin: 0; } .video-wall div { overflow-y: auto; } .video-wall p { color: white; text-align: center; } .video-wall a { color: white; } .video-wall .video-link { display: block; white-space: nowrap; font-size: 0.8em; margin: 0; position: absolute; left: 50%; bottom: 6em; transform: translateX(-50%); } .video-wall .button { appearance: none; cursor: pointer; display: block; border: 0 none; text-align: center; position: absolute; left: 50%; transform: translateX(-50%); border-radius: 8px; background: white; color: var(--itzehoer-green); font-size: 20px; font-weight: bold; line-height: 24px; padding: 12px 32px; margin: 0; text-decoration: none; } .video-wall .button:hover { background-color: var(--itzehoer-darkgreen-image-overlay); color: #FFF; }