/*
	see Book page 343,
D:\xampp\htdocs\responsive-praxisbeispiele\praxisbeispiele\kap11\08_video-iframe\html




<div class="iframe-wrapper">
<iframe src="https://www.youtube.com/embed/85HxjXxlbXw" allowfullscreen></iframe>
</div>



https://www.ithelps-digital.com/de/blog/anleitungen/youtube-videos-responsive-einbinden



*/



div.iframe-wrapper {
    position: relative;
    padding-bottom: 56.272%;
    height: 0px;
    margin: 1rem 0px;
}

div.iframe-wrapper iframe {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0px none;
    margin: 0px;
}

/*

div.iframe-wrapper iframe, div.iframe-wrapper embed {
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 100%;
    border: 0px none;
    margin: 0px;
}
*/






.responsive-video {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.responsive-video iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* ==================================================== 
https://dev.to/deammer/embed-responsive-youtube-videos-in-2021-5dkh

<iframe
  class="video"
  src="https://www.youtube.com/embed/msizPweg3kE"
  frameborder="0"
  allow="accelerometer; autoplay; encrypted-media; gyroscope;"
  allowfullscreen></iframe>


*/

.video {
  aspect-ratio: 16 / 9;
  width: 100%;
  
  border-width:0px;
  
/*  <!-- width="540" height="390" --> */ 
}


div.video-title {
	width: 100%;

	display: block;
	margin: -1em 0 1em 0;	 
	padding: 10px;	
	
	background: url('/assets/custom/img/design/panel.jpg') #D1D7DC repeat left top;
	
	border-radius: var(--bs-border-radius) !important;	
	border-width: 30px;
	border-color: #555;	  
	
	
		color: #222;
	text-align: center;
	font-family: Verdna, Calibri; 
	font-weight: 600;	
	font-size: 0.9em;
	line-height: 1.1em;
	
}