.hide-controls .mejs__controls {
  display: none !important;
}

.mediaelement-cover-container {
  display: none;
}

.icon-overlay-container {
  position: relative;
  display: inline-block;
}

.icon-overlay {
  width:12%;
  aspect-ratio: 1;

  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  background-color: white;
  background-size: cover;
  border-radius: 50%;

  pointer-events: none;
}

.icon-overlay::before {
  width: 100% !important;
  height: 100% !important;
  color : var(--background-action-high-blue-france-active);

}

.mediaelement_player  button:active, .mediaelement_player  button:hover {
  background: transparent none !important;
}

.mejs__poster {
  pointer-events: none;
}




/* The outer-div to move the elements */
.youtube-wrapper{
  position: relative;
  width: 100%;
  height: 100%;
  cursor: pointer;
  overflow: hidden;
}

/* Set Cover aka Background-Image */
.youtube-wrapper .bg-video {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  z-index: 2;
}

.pswp__iframe-container .youtube-wrapper .bg-video {
  max-width: 1280px;
  max-height: 720px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

/* Add light shade to make play button visible*/
.bg-video::after{
  content:'';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.1);
  z-index: 3;
}

/* When Class added the Cover gets hidden... */
.youtube-wrapper.open .bg-video{
  visibility: hidden;
  opacity: 0;

  -webkit-transition: all .6s .8s;
  transition: all .6s .8s;
}

/* and iframe shows up */
.youtube-wrapper.open .video-container{
  opacity: 1;
  -webkit-transition: all .6s .8s;
  transition: all .6s .8s;
}

.video-container {
  position: relative;
  width: 100%;
  height: 100%;
  margin: 0;
  z-index: 1;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}