Youtube IFrame API

by Soya Natsuki

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css">
<vc data-videosrc="IGInsosP0Ac,RxCEMy022Do" data-title="플레이리스트 제목" data-description="플레이리스트, 영상 설명"></vc>

CSS

.video-container {
  padding: 15px;
  background-color: #36404a;
  background-clip: border-box;
  border: 0 solid #36404a;
}

.video-box {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%;
}

.tool-box {
    position: relative;
    display: flex;
    flex-direction: column;
    min-width: 0;
    word-wrap: break-word;
    background-color: #36404a;
    background-clip: border-box;
    border: 0 solid #36404a;
    border-bottom: 1px solid #424e5a;
    border-top-left-radius: .25rem;
    border-top-right-radius: .25rem;
    box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, .03);
}

.tool-box-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding: 1rem;
  color: #94a0ad;
}

.tool-box-title {
  display: inline-block;
}

.title-box {
  float: left;
}

.switch-box {
  float: right;
}

.info-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  background-color: #36404a;
  background-clip: border-box;
  border: 0 solid #36404a;
  border-top: 1px solid #424e5a;
  border-bottom-left-radius: .25rem;
  border-bottom-right-radius: .25rem;
  box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, .03);
}

.info-box-body {
  flex: 1 1 auto;
  min-height: 1px;
  padding-top: .5rem;
  padding-right: 1rem;
  padding-left: 1rem;
  padding-bottom: 1rem;
  color: #94a0ad;
}

.info-box-title {
  display: inline-block;
  color: #fff;
  margin-top: 0;
  margin-bottom: .5rem;
}

#video-count {
  float: right;
}

.img-box {
  position: relative;
  display: flex;
  flex-direction: column;
  min-width: 0;
  word-wrap: break-word;
  border-bottom-right-radius: .25rem;
  box-shadow: 0 0.75rem 6rem rgba(56, 65, 74, .03);
}

#book-image {
  width: 100%;
  height: 50px;
}

#player {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 5px;
}

JavaScript

// load switchery.js css & js
/*
var head  = document.getElementsByTagName('head')[0];
var link  = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.css';
head.appendChild(link);

var tag = document.createElement('script');
tag.src = 'https://cdnjs.cloudflare.com/ajax/libs/switchery/0.8.2/switchery.min.js';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
*/

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

// create video container element
var vc = document.getElementsByTagName('vc')[0];
vc.setAttribute('class', 'video-container');
vc.outerHTML = vc.outerHTML.replace(/vc/g, "div");

// create switch tool box element
var html = '<div class="title-box"><span class="tool-box-title">플레이리스트 자동재생 : </span></div> <div class="switch-box"><input type="checkbox" id="auto-play" class="js-switch" /></div>';
var toolBox = document.createElement('div');
toolBox.setAttribute('class', 'tool-box');
var toolBoxBody = document.createElement('div');
toolBoxBody.setAttribute('class', 'tool-box-body');
toolBox.append(toolBoxBody);
toolBoxBody.innerHTML = html;
document.getElementsByClassName('video-container')[0].parentNode.prepend(toolBox);

// create book image element
var imgBox = document.createElement('div');
imgBox.setAttribute('class', 'img-box');
imgBox.innerHTML = '<img id="book-image" src="http://soya.moe:463/CDN/book_img.png" />';
document.getElementsByClassName('video-container')[0].parentNode.parentNode.append(imgBox);

// switchery init
var elem = document.querySelector('.js-switch');
var init = new Switchery(elem, {
  size: 'small'
});

// create youtube embed player...