Cara Memasang Iklan di Embed Video Iframe Sederhana

Selamat datang kembali di Code Pelajar, kali ini saya akan menuliskan tutorial yang menarik seputar trik memanfaatkan tata letak iklan adsense. Pada kali ini saya akan membagikan trik bagaimana memasang iklan di video player dengan tag iframe. Sebelum melanjutkan tutorial alangkah baiknya melihat trik Cara Memasang Iklan Melayang bisa kamu cari di blog ini.

Menyisipkan iklan di video iframe? Lah emang bisa? tentunya ini hanya trik ya sobat hehe. Sebenarnya disini saya hanya bermain HTML dan CSS position dan sedikit javascript saja. untuk contohnya kamu bisa lihat di bawah ini:

Cara Membuat iklan di Video iframe Sederhana

Pertama-tama kita buat css video responsive dan ads-wrappernya yang sudah saya custom dan siapkan dibawah:


<style>
.my-video {
    text-align: center;
    margin: auto;
    width: 100%;
    position: relative;
} 
.v-ads {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #222;
}
.vr {
    position: relative;
    padding-bottom: 56.25%;
    height: 0;
    overflow: hidden;
}
.vr iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.v-main {
 position: relative;
 max-width: 325px; /*ukuran bisa disesuaikn sesuia ukuran iklan*/
 margin: 5% auto 5% auto;
}
.closer {
 display: inline-block;
 color: red;
 cursor: default;
}
@media (max-width: 640px){
 .v-main {
  max-width: 100%;
  width: 100%;
  margin:auto;
 }
}
</style>

Jika sudah memasang CSS nya kita tinggal menyiapkan kerangka HTML khusus untuk videonya. Nah saya ingatkan juga kalau ini bukan memasang iklan langsung dari videonya, melainnya saya hanya memasang iklan dengan elem html khusus dan sedikit trik CSS dan JS. Sebagai contoh kita akan mengembed video youtube dengan tag >iframe/&t; cukup kita membuat customnya HTMLnya seperti dibawah ini:


<div class="my-video">
 <div class="v-ads">
     <div class="v-main">

         <span class="closer">Close Ads</span>
     </div>
 </div>
 <div class="vr v-video">
     <iframe allowfullscreen="" frameborder="0" height="344" src="URL-VIDEO" width="459"></iframe>
 </div>
</div>

Pada HTML di atas ubah URL-VIDEO dengan url yang kamu inginkan dan biarkan seperti itu dahulu jangan di beri iklan. karena script iklan akan kita atur pada javascriptnya.

Untuk javascriptnya sendiri bisa dilihat seperti dibawah ini:


<script type="text/javascript">/*<![CDATA[*/
  // gunakan iklan responsive untuk hasil maksimal
  var ads_elem = '<ins class="adsbygoogle" style="display:inline-block;width:300px;height:250px" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx"></ins><script>(adsbygoogle = window.adsbygoogle || []).push({});</\script>';
  $('.v-ads .v-main').prepend(elem)
  $('.closer').click(function(){
   $('.v-ads').remove()
  })
/*]]>*/
</script>

Haha untuk javascript cukup simpel sih, saya sendiri menggunakan jQuery (cara pasang jquery disini). Pada kode diatas kita menempatkan kode iklan yang disimpan variabel ads_elem dijadikan string. Kode iklan bisa kamu ubah sesuai keinginan, mau itu yang responsive ataupun statis terserah. Untuk hasilnya bisa kamu lihat live demonya dibawah ini

DEMO

Itulah tutorial singkat yang bisa saya bagikan sekarang ini, receh ya hehe tapi semoga bermanfaat dan terus mencoba hal baru. Terus kunjungi juga Code Pelajar dan Tutorial Anti Mainstreamnya. Jika ada pertanyaan jangan sungkan berkomentar dibawah, insyalloh dibalas

Code Pelajar

Code Pelajar

Community

Hosted By