<div class="container">
  <iframe class="video" src="https://www.youtube.com/embed/upPCohrJcbw?showinfo=0&modestbranding=1" frameborder="0" allowfullscreen></iframe>
</div>
@import url('https://fonts.googleapis.com/css?family=Arvo');

$fontColor: #fff;

@mixin outlineStyle {
  outline: var(--outlineWidth) solid rgba(#000, 0.4);
  outline-offset: var(--outlineWidth);
}


:root {
  --cellWidth: 5.625vw;
  --outlineWidth: 2vw;
}

.message {
  @include outlineStyle;
  padding: 2em;
  font-size: 1.7vw;
  color: $fontColor;
  
  @supports(display: grid) {
    display: none;
  }
}

html,
body {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  font-family: "Arvo", monospace;
  
  &:after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 100%;
    background: url('https://images.unsplash.com/photo-1493514789931-586cb221d7a7?dpr=2&auto=format&fit=crop&w=1500&h=1000&q=80&cs=tinysrgb&crop=&bg=') center / cover no-repeat;
    filter: blur(2px);
  }
}

.container {
  display: none;
  
  @supports(display: grid) {
    display: grid;
    grid-template-columns: repeat(16, var(--cellWidth));
    grid-auto-rows: var(--cellWidth);
    outline-offset: var(--outlineWidth);
    @include outlineStyle;
  }
  
  @media (min-width: 450px) {
    --cellWidth: 5vw;
    --outlineWidth: 3vw;
  }
  
  @media (min-width: 960px) {
    --cellWidth: 50px;
    --outlineWidth: 30px;
  }
}

.video {
  grid-column: span 16;
  grid-row: span 9;
  width: 100%;
  height: 100%;
  background: url('https://s3-us-west-2.amazonaws.com/s.cdpn.io/60485/Screen%20Shot%202017-05-01%20at%2011.27.18%20PM.png') center / cover no-repeat;
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.