﻿/* Video */
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 100%;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
@media screen and (max-width: 900px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}
@media screen and (max-width: 600px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}







/* Video *
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

/*
.video{
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 100%;max-height:800px;
}

.vid_wrap_elbow {
	margin: 0 0 0 0;
	position: relative;
	padding-bottom: 56.25%;
	height: 100%;
}
.vid_wrap_elbow iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height:750px;
}
/*
const passwordForm = document.querySelector(".overPassword");
const passwordInput = document.querySelector("#password");

password_input.addEventListener("keypress", (e) => {
  //TODO: claus
});
passwordInput.addEventListener("keypress", (e) => {
  passwordForm.remove();

  let iframe = document.createElement('iframe');
  iframe.setAttribute('src', `https://www.youtube.com/embed/9gL0ALLt3AM?autoplay=1&rel=0&controls=0&showinfo=0`);
  iframe.setAttribute('frameborder', '0');
  iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
  iframe.setAttribute('allowfullscreen', '');
  iframe.setAttribute('width', '1280');
  iframe.setAttribute('height', '620');

  document.querySelector('.autoplay').appendChild(iframe);
});





/*

@media screen and (max-width: 900px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.vid_wrap_elbow {
	margin: 30% 20% 10% 20%;
	position: relative;
	padding-bottom: 56.25%;
	height: 100%;
}
.vid_wrap_elbow iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height:750px;
}

}
@media screen and (max-width: 600px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.vid_wrap_elbow {
	margin: 30% 20% 10% 20%;
	position: relative;
	padding-bottom: 56.25%;
	height: 100%;
}
.vid_wrap_elbow iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	max-height:750px;
}

}






/*
@media screen and (max-width: 900px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
)
@media screen and (max-width: 600px) {
.vid_wrap {
	margin: 0 2% 0 2%;
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
}
.vid_wrap iframe {
	margin: 0 auto 0 auto;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
}





