react-yt-wrap/dist/components/reactYtWrap.css

[](https://www.npmjs.com/package/react-yt-wrap)   ![GitHub pull re

.react-youtube-player-wrap {
  width: 100%;
  position: relative;
  box-sizing: border-box;
}

.react-youtube-player-wrap .react-youtube-player-wrap-video {
  width         : 100%;
  position      : relative;
  padding-bottom: 56.25%;
  padding-top   : 25px;
  height        : auto;

}
.react-youtube-player-wrap  .react-youtube-player-pip{
  position: fixed;
  bottom: 4px;
  right: 10px;
  width: 30%;
  z-index: 15;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb {
  position: relative;
  cursor  : pointer;
}

.react-youtube-player-wrap .react-youtube-player-wrap-pip-but{
  position: absolute;
  top:10px;
  right: 10px;
  cursor: pointer;
  font-size: 20px;
  color:rgb(0, 51, 255);
  background-color:transparent;
  border: none;
  z-index: 10;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb img {
  width        : 100%;
  border-radius: 10px;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button {
  position     : absolute;
  z-index      : 10;
  top          : 50%;
  left         : 50%;
  border       : none;
  transform    : translateX(-50%) translateY(-50%);
  box-sizing   : content-box;
  display      : block;
  width        : 32px;
  height       : 44px;
  /* background: #fa183d; */
  border-radius: 50%;
  padding      : 18px 20px 18px 28px;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button:before {
  content      : "";
  position     : absolute;
  z-index      : 0;
  left         : 50%;
  top          : 50%;
  transform    : translateX(-50%) translateY(-50%);
  display      : block;
  width        : 80px;
  height       : 80px;
  background   : #b00095;
  border-radius: 50%;
  animation    : pulse-border 1500ms ease-out infinite;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button:after {
  content      : "";
  position     : absolute;
  z-index      : 1;
  left         : 50%;
  top          : 50%;
  transform    : translateX(-50%) translateY(-50%);
  display      : block;
  width        : 80px;
  height       : 80px;
  background   : #ff00d9;
  border-radius: 50%;
  transition   : all 200ms;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button:hover:after {
  background-color: darken(#fa183d, 10%);
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button img {
  position : relative;
  z-index  : 3;
  max-width: 100%;
  width    : auto;
  height   : auto;
}

.react-youtube-player-wrap .react-youtube-player-wrap-thumb .video-play-button span {
  display      : block;
  position     : relative;
  z-index      : 3;
  width        : 0;
  height       : 0;
  border-left  : 32px solid #fff;
  border-top   : 22px solid transparent;
  border-bottom: 22px solid transparent;
}

@keyframes pulse-border {
  0% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1);
    opacity  : 1;
  }

  100% {
    transform: translateX(-50%) translateY(-50%) translateZ(0) scale(1.5);
    opacity  : 0;
  }
}



/* IFrame */

.react-youtube-player-wrap iframe {
  position: absolute;
  top     : 0;
  left    : 0;
  width   : 100%;
  height  : 100%;
}