<div class="wrapper">
  <input type="checkbox">
  <div class="video">
<div id="youtube"></div>
  </div>
  <div class="text">
    <span data-text="動画を見る"></span>
  </div>
</div>
.wrapper {
  --color: #1F242D;
  --color-invert: #ffffff;
  --clip-path: circle(15px at left);
  --clip-path-hover: circle(70px at left);
  --clip-path-clicked: circle(100vw at left);
  --duration: .4s;
  --timing-function: ease;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}
.wrapper .video {
  height: 100vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-left: 15px;
  clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
}
.wrapper .video #youtube {
  position: fixed;
  background: #c4cbde;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%);
}
.wrapper .text {
  position: relative;
  text-transform: uppercase;
  font-weight: 600;
  letter-spacing: .2px;
  opacity: var(--opacity, 1);
  transition: opacity 0.3s var(--timing-function) 0.2s;
}
.wrapper .text::before, .wrapper .text::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -1px;
  right: 25px;
  height: 0;
}
.wrapper .text::before {
  box-shadow: 26px 0 0 1px var(--color);
  right: var(--r, 100%);
  opacity: var(--opacity, 0);
  transition: right .5s ease-in, opacity .1s linear;
}
.wrapper .text::after {
  box-shadow: 26px 0 0 1px var(--color-invert);
  clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
}
.wrapper .text > span::before, .wrapper .text > span::after {
  content: attr(data-text);
  padding-left: 26px;
}
.wrapper .text > span::before {
  color: var(--color);
}
.wrapper .text > span::after {
  color: var(--color-invert);
  clip-path: var(--clip-path);
  transition: -webkit-clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function);
  transition: clip-path var(--duration) var(--timing-function), -webkit-clip-path var(--duration) var(--timing-function);
  position: absolute;
  left: 0;
}
.wrapper input {
  width: 220px;
  height: 40px;
  margin: auto;
  position: absolute;
  left: 0;
  right: 0;
  border-radius: 40px;
  z-index: 2;
  appearance: none;
  cursor: pointer;
}
.wrapper input:focus {
  outline: 0;
}
.wrapper input:hover ~ .video {
  clip-path: var(--clip-path-hover);
}
.wrapper input:hover ~ .text::before {
  --r: 25px;
  --opacity: 1;
}
.wrapper input:hover ~ .text::after {
  clip-path: var(--clip-path-hover);
}
.wrapper input:hover ~ .text > span::after {
  clip-path: var(--clip-path-hover);
}
.wrapper input:checked {
  width: 100%;
  height: 100%;
  border-radius: 0;
}
.wrapper input:checked ~ .video {
  clip-path: var(--clip-path-clicked);
}
.wrapper input:checked ~ .text {
  --opacity: 0;
  transition: opacity 0.3s var(--timing-function);
}
.wrapper input:checked ~ .text::after {
 clip-path: var(--clip-path-clicked);
}
.wrapper input:checked ~ .text > span::after {
clip-path: var(--clip-path-clicked);
}

body {
  background: #E8EBF3;
  height: 100vh;
  font: 400 16px ;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
//by https://koukitips.net/youtube-mute/

var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// YouTubeの埋め込み
function onYouTubeIframeAPIReady() {
  ytPlayer = new YT.Player(
    'youtube',
    {
      videoId: 'zTBmv-Gzf2w', // YouTubeのvideoIdを入れる
      playerVars: {
        loop: 1, // ループしない
        controls: 1, // コントローラー表示
        autoplay: 1, // 自動再生オフ
        rel: 0,  // オススメ動画を表示させない
        showinfo: 1 // タイトル表示
      },
      events: {
        'onReady': onPlayerReady
      }
    }
  );
}
function onPlayerReady(event) {
  event.target.setVolume(0);
}

External CSS

  1. https://fonts.googleapis.com/css?family=Poppins:300,400,500,700&amp;display=swap

External JavaScript

This Pen doesn't use any external JavaScript resources.