html { box-sizing: border-box; }
* { box-sizing: inherit; }

body {
   margin: 0;
   padding: 0;
   background-color: #f0f1f2;
}

.video {
   max-width: 600px;
   position: relative;
   margin: 100px auto 0 auto;
}

.video-wrap {
   position: relative;
   z-index: 5;
   padding: 15px;
   background-color: #fff;
   box-shadow: -1px -1px 3px #777;
   border-radius: 15px;
}

.video-container {
   position: relative;
   padding-bottom: 56.25%;
   height: 0;
   overflow: hidden;
   max-width: 100%;
   border-radius: 8px;
}
.video-container iframe {
   position: absolute;
   top: 0; left: 0;
   width: 100%; height: 100%;
}

.video-logo {
   margin-top: 15px;
   text-align: center;
}

.deco {
   position: absolute;
}
.deco-left {
   top:50px; left: -122px;
}
.deco-right {
   top: 25px; right: -120px;
}

@media (max-width:840px) {
   .video { margin: 15px auto; }
   .deco { display: none; }
}

@media (max-width:620px) {
   .video { margin: 15px; }
}