.videoBox, .videoBox div img { width: 100%; margin: auto; cursor: pointer; } .videoBox h2 { margin-bottom: 10px; text-align: center; font-weight: bold; } .videoBox p { margin-top: 10px; text-align: center; } .videoBoxMore, .videoBoxMore div img { width: 80%; } .responsive_16-9, .responsive_4-3, .responsive_a4 { position: relative; /* 16 zu 9 Layout für Videos */ padding-bottom: 56.25%; height: 0; overflow: hidden; } .responsive_4-3 { /* 4 zu 3 Layout für Präsentationen */ padding-bottom: 75%; } .responsive_a4 { /* DIN A4 Layout für Dokumente */ padding-bottom: 142.86%; } .responsive_16-9 iframe, .responsive_4-3 iframe, .responsive_a4 iframe, .responsive_16-9 object, .responsive_4-3 object, .responsive_a4 object, .responsive_16-9 embed, .responsive_4-3 embed, .responsive_a4 embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .tubeFlexTable { align-items: stretch; display: flex; flex-basis: auto; flex-grow: 1; flex-wrap: wrap; margin: auto; } .tubeFlexTable div.flex { width: 50%;
margin-bottom: 40px; } .videoBox div { text-align: center; } .videoBox .playbutton { width: 108px; height: 75px; background-image: url("../images/play_dark_klein.png"); background-size: cover; position: absolute; top: 40%; left: 42%; cursor: pointer; } .videoBox .responsive_4-3 .playbutton { top: 40%; } .videoBoxMore .playbutton { width: 50px; height: 35px; top: 40%; left: 43% } .videoBoxMore .responsive_4-3 .playbutton { top: 30%; left: 43%; } .videoBox :hover .playbutton { background-image: url("../images/play_color_klein.png"); } @media (max-width: 600px) { .tubeFlexTable div.flex, .videoBox { width: 100%; } } /* Boxsite Design */ div.siteBoxVideo div img { width: 100%; height: auto; } div.siteBoxVideo div.responsive_16-9, div.siteBoxVideo div.responsive_4-3, div.siteBoxVideo div.responsive_a4 { padding-bottom: 90%; margin-bottom: -30px; } div.siteBoxVideo div div .playbutton { width: 79px; height: 55px; background-image: url("../images/play_dark_klein.png"); background-size: cover; position: absolute;
top: 34%; left: 38%; cursor: pointer; } div.siteBoxVideo div div:hover .playbutton { background-image: url("../images/play_color_klein.png"); } div.siteBoxVideo div.siteBoxVideoMargin { margin-bottom: 25px; }