Mys2010 on Codepen

Memasang kode YouTube Ambilight Prototype
Code ini dapat menamplkan Video Youtube Online. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="TopTitle-styles">

* {
  padding: 0;
  margin: 0;
  border: 0;
  outline: 0;
}
body {
  background-color: #000;
}
#tubular-container {
  filter: blur(50px) brightness(0.5);
  -webkit-filter: blur(50px) brightness(0.5);
  z-index: 0;
}
.video {
  width: 560px;
  height: 315px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
</style>

<div class='video'></div>

<script src="//assets.codepen.io/assets/libs/prefixfree.min-d258f6cb24f3a877e4fb83b348ec8a3f.js">
</script>
<script src="//assets.codepen.io/assets/common/stopExecutionOnTimeout-f961f59a28ef4fd551736b43f94620b5.js">
</script>
<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script>
<script src='http://www.seanmccambridge.com/tubular/js/jquery.tubular.1.0.js'>
</script>

<script>
      (function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width=\'560\' height=\'315\' src=\'//www.youtube.com/embed/' + yt_id + '?rel=0&controls=0&showinfo=0&autoplay=1\' frameborder=\'0\' allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));    
    </script>

Penjelasan :
Tambahkan background gambar jika diperlukan, copy code berikut ini :

body {background-image: url(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #333;
}

Patekan dibawah code :

<style class="TopTitle-styles">

Kemudian copy code berikut ini :

<p align="center">
<img src="http://Link Gambar.png" 
name="e902" border="0" width="780" height="610" /></a> 
</center>
<header>

<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://Link Title.html" title="Myscript2010">Your Text</a>
</header>

Pastekan dibawah code :

<div class='video'> </div>

Selanjutnya edit ukuran gambar serta ukuran screen youtube width heigh agar sesuai dengan tampilan, dalam code tersebut ada background latar yang bernama Tubular Js, hapus code tersebut jika tidak diperlukan, lalu klik pratinjau untuk melihat hasil dan klik perbarui selesai

Edited by. Myscript2010
Sources by. Max On Codepen

DEMOSHOW

See also code after modificationCode Here Youtube Online

Memasang kode YouTube Ambilight Prototype
Code ini dapat menamplkan Video Youtube Online. Untuk menerapkan kode tersebut Langkah awal Login ke akun blog klik tombol blog baru, buat satubuah link baru  kemudian beri nama sesuai fungsi, klik Edit HTML pada link baru tersebut, hapus semua kode template  
ganti dengan kode blank template, yang tersedia pada sumber  berikut ini Get Blank Template edit background warna sesuai keinginan dan klik simpan selesai

Kemudian klik entri halaman baru HTML pada link tersebut
copy kode dibawah ini, pastekan kedalam halaman baru tersebut dan klik simpan selesai

<style class="TopTitle-styles">
html {
  font: 13px 'Open Sans', 'Helvetica', Sans-serif;
}
header {
  -o-transition-duration: 0.3s;
  -moz-transition-duration: 0.3s;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  padding:  0px 0;
  position: fixed;
  top: 0;
  width: 100%;
  background: #444;
  border-bottom: 3px solid #333;
}

body {background-image: url
(http://Link Gambar.jpg)
;color:red;height:100%;overflow:hidden;}

#tubular-container {
  filter: blur(0px) brightness(.5);
  -webkit-filter: blur(0px) brightness(.5);
  z-index: 0;
}

.video {
  width: 567px;
  height: 300px;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  z-index: 100;
}
</style>

<div class='video'>
</div>
<p align="center">

<img src="http://Link Gambar.png" name="e902" border="0" width="780" height="610" /></a> 
</center>

<header>
<div class="page-wrap clearfix">
<p align="center">
<font size="2" color="green"face="arial"> 
<a href="http://Link Title" title="Myscript2010">YOUR TEXT</a>
</header>

<script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'>
</script> 

<script>(function () {
    var ambilight;
    $(document).ready(function () {
        return ambilight.on('KSqttO3NtCg', '.video');
    });
    ambilight = {
        on: function (yt_id, container) {
            $(container).append('<iframe width="570" height="330" src="https://www.youtube.com/embed/Favl3kzWejA?list=RDcbV190MjKiU" frameborder="0" allowfullscreen></iframe>');
            return $('body').tubular({ videoId: yt_id });
        }
    };
}.call(this));
 
</script>

Penjelasan :
Edit Code ukuran gambar serta ukuran screen youtube width heigh dan ganti link youtube sesuai keinginan

Edited by. Myscript2010
Sources by. Max On Codepen

DEMOSHOW

You can edit the code before modificationnCode Here Youtube Online