YouTube Insert

by Lazaro Contreras

HTML

<div class="youtube" id="zsuFLJ_2FNE" width="47%"></div>
<div class="youtube" id="TvM_c9lJ7cs" width="47%"></div>
<div class="youtube" id="cGbP2y7Obas" width="47%"></div>
<div class="youtube" id="V-JDpN4vsuQ" width="47%"></div>

CSS

div.youtube{
  display:inline;
}

JavaScript

Load(function(){
youtube = ClassName("youtube");
for (var i = 0; i < youtube.length; i++) {
   //iframe
   var iframe = Create('iframe');
   iframe.className = 'youtube-video';
   iframe.width = Get(youtube[i],"width");
   iframe.height = Get(youtube[i],"height");
   iframe.style.border ="none"
   var id = Get(youtube[i],"id");
   iframe.src = "https://www.youtube.com/embed/" + id;
   Set(iframe,'allowFullScreen', '');

  Add(youtube[i],iframe);
 }
 });
 //Code Simplification
 function Load(NameFunction){
  return AddEvent(window,'load',NameFunction,false);
}
function AddEvent(Element,Attribute,FunctionName,Value){
  return Element.addEventListener(Attribute,FunctionName,Value);
}
function ClassName(className){
  return document.getElementsByClassName(className);
}
function Create(Create){
  return document.createElement(Create);
}
function Get(Element,Attribute){
  return Element.getAttribute(Attribute);
}
function Set(Element,Attribute,Value){
  return Element.setAttribute(Attribute,Value);
}
function Add(Element,Child){
  return Element.appendChild(Child);
}