/*****************************************
CSS to style youtube embed videos with a facade img
Dependencies: youtube-embed.js
Demo: youtube-embed
version: 1.0
by: Felipe Lima
*****************************************/

.youtube-embed-container svg {
  filter: drop-shadow(1px 1px 10px hsl(206.5, 70.7%, 8%));
  transition: all 250ms ease-in-out;
}

.youtube-embed-container {
  position: relative;
  background: black;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

.youtube-embed-container iframe {
  border: 0;
}

.youtube-embed-container img.youtube-embed__thumbnail {
  /* width: js sets it up
    height: js sets it up */
  object-fit: cover;
  /* Ensure the image fits the video container */
  display: block;
  transition: transform 0.3s ease;
}

.youtube-embed-container .youtube-embed__play-btn-container {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
  background: rgba(0, 0, 0, 0.3);
  /* Semi-transparent background for play button */
}

.youtube-embed-container:hover .youtube-embed__play-btn-container {
  background: rgba(0, 0, 0, 0);
}

.youtube-embed-container .youtube-embed__play-btn-container svg {
  /* width: 30%; */
  height: auto;
  /* fill: #fff;
    transition: transform 0.3s ease; */
  opacity: 0.85;
}

.youtube-embed-container:hover .youtube-embed__play-btn-container svg {
  filter: drop-shadow(1px 1px 10px hsl(206.5, 0%, 10%));
  transform: scale(1.2);
  /* stroke: #ff0000; */
  opacity: 1;
}

.youtube-embed-container:hover .youtube-embed__play-btn-container svg circle {
  stroke: #ff0000;
  fill: #ff0000;
}

.youtube-embed-container:hover .youtube-embed__play-btn-container svg polygon {
  fill: white;
  stroke: white;
}

.youtube-embed-container:hover img.youtube-embed__thumbnail {
  transform: scale(1.1);
  /* Scale up image on hover */
}

.youtube-embed-container.youtube-embed-playing img.youtube-embed__thumbnail {
  display: none;
  /* Hide image when video is playing */
}