:root {
  --w: 320px;
  --h: 400px;
}

body {
  margin: 0;
  padding: 0;
  width: var(--w);
  height: var(--h);
  display: block;
  position: relative;
  overflow: hidden;
}

* {
  box-sizing: border-box;
}

#link {
  width: var(--w);
  height: var(--h);
  display: block;
  position: relative;
  overflow: hidden;
}

video {
  width: var(--w);
  height: var(--h);
  object-fit: cover;
}

#playPauseBtn {
  background-position: center center;
  background-size: 30%;
  background-repeat: no-repeat;
  position: absolute;
  bottom: 0;
  right: 0;
  width: 50px;
  height: 50px;
  display: block;
  background-color: yellow;
  z-index: 4;
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS42NjMiIGhlaWdodD0iMTQuNTc5IiB2aWV3Qm94PSIwIDAgMTEuNjYzIDE0LjU3OSI+CiAgPGcgaWQ9Ikljb25faW9uaWMtaW9zLXBhdXNlIiBkYXRhLW5hbWU9Ikljb24gaW9uaWMtaW9zLXBhdXNlIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOSAtNi43NSkiPgogICAgPHBhdGggaWQ9IlBhdGhfNzk1IiBkYXRhLW5hbWU9IlBhdGggNzk1IiBkPSJNMTIuMjc2LDIxLjMyOUg5LjM2OUEuMzY3LjM2NywwLDAsMSw5LDIwLjk2NVY3LjExNGEuMzY3LjM2NywwLDAsMSwuMzY5LS4zNjRoMi45MDdhLjM2Ny4zNjcsMCwwLDEsLjM2OS4zNjR2MTMuODVBLjM2Ny4zNjcsMCwwLDEsMTIuMjc2LDIxLjMyOVoiLz4KICAgIDxwYXRoIGlkPSJQYXRoXzc5NiIgZGF0YS1uYW1lPSJQYXRoIDc5NiIgZD0iTTI0LjY1MSwyMS4zMjlIMjEuNzQ0YS4zNjcuMzY3LDAsMCwxLS4zNjktLjM2NFY3LjExNGEuMzY3LjM2NywwLDAsMSwuMzY5LS4zNjRoMi45MDdhLjM2Ny4zNjcsMCwwLDEsLjM2OS4zNjR2MTMuODVBLjM2Ny4zNjcsMCwwLDEsMjQuNjUxLDIxLjMyOVoiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC00LjM1NikiLz4KICA8L2c+Cjwvc3ZnPgo=');
}

#playPauseBtn:hover {
  cursor: pointer;
}

#playPauseBtn.paused {
  background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMS42NjUiIGhlaWdodD0iMTQuNTgiIHZpZXdCb3g9IjAgMCAxMS42NjUgMTQuNTgiPgogIDxwYXRoIGlkPSJJY29uX2lvbmljLWlvcy1wbGF5IiBkYXRhLW5hbWU9Ikljb24gaW9uaWMtaW9zLXBsYXkiIGQ9Ik05LDcuMTI5VjIwLjk1MmEuMzU2LjM1NiwwLDAsMCwuNTMzLjMyOEwyMC40OSwxNC4zNjhhLjM5Mi4zOTIsMCwwLDAsMC0uNjUyTDkuNTMzLDYuODA1QS4zNTMuMzUzLDAsMCwwLDksNy4xMjlaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgtOSAtNi43NTEpIi8+Cjwvc3ZnPgo=');
}