Beiträge von Cipha

<style>


.videoWrapper {
    position: relative;
    padding-bottom: 56.25%; /* Seitenverhältnis von 16:9  -> 9/16*100 =56,25% */
    height: 0;
    overflow: hidden;
}




.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
</style>
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/TAbuqoDSngU" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

#designerWrapper #sidebar {  
	grid-area: sb;  
	display: grid;  
	grid-gap: 18px;  
	background: #fff;  
	border-radius: 1px;  
	padding: 12px;  
	height: 100%;  
	}




#designerWrapper #sidebar .editBox {
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr auto 1fr;
  grid-template-areas: 
	"t" 
 	"f" 
 	"b";
  max-height: 100%;
}




#designerWrapper #sidebar .editBox p.title {
  grid-area: t;
  font-size: 1.5rem;
}




#designerWrapper #sidebar .editBox .ghostButton {
  margin: 0;
  padding: 9px 3px;
}




#designerWrapper #sidebar .editBox form {
  grid-area: f;
}




#designerWrapper #sidebar .editBox form .imgWrapper {
  max-height: 100%;
  overflow-y: scroll;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: minmax(30px, auto);
  grid-gap: 9px;
  padding-right: 9px;
}




#designerWrapper #sidebar .editBox form .imgWrapper img {
  margin: 0;
  border: 3px solid #fff;
}




#designerWrapper #sidebar .editBox form .imgWrapper img.active {
  border-color: #8bc34a;
}




#designerWrapper #sidebar .editBox .button {
  grid-area: b;
}

 <div id="sidebar">
 <div class="editBox">
                <p class="title">Collage auswählen</p>
                <form>
                    <div class="imgWrapper">
                        <img class="active" src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-1.jpg"}" lt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-2.jpg"}" alt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-4.jpg"}" alt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-5.jpg"}" alt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-6.jpg"}" alt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-7.jpg"}" alt="Test">
                        <img src="{static "/grid/img/ico_loading.gif"}" data-src="{static "/container/designer/test-8.jpg"}" alt="Test">
                    </div>

                </form>
                 <a href="#" class="ghostButton maxWidth">
                       <span class="icon-plus-circle"> Fotos hochladen</span>
                    </a>
            </div> 
     </div>