Advertisement
Tidak Enak bukan ketika misalkan anda sendiri yang mengalami hal seperti itu,pada dasarnya kode semat standart dari video memiliki pengaturan yang juga standart mengenai lebar dan tinggi iframe - nya. Untuk itu anda harus mengakalinya agar video semat tersebut lebih responsive agar lebar dan tinggi video dapat secara otomatis menyesuaikan lebar layar pengguna ponsel.
Kode semat bawaan youtube standartnya adalah seperti ini :
<iframe width="560" height="315" src="//www.youtube.com/embed/lf_cUxnnu7E" frameborder="0" allowfullscreen></iframe>
untuk mengakali agar video youtube lebih responsive anda perlu menambahkan bebrapa kode css untuk mem packing si video tersebut,dan berikut adalah kode cssnya silahkan anda pastekan di dalam template/edit html di atas kode skin.
.embed-box-youtube {
position: relative;
padding-bottom: 62.25%; /* ratio for youtube embed */
padding-top: 30px;
height: auto;
overflow: hidden;
}
.embed-box-youtube iframe,
.embed-boxyoutube object,
.embed-boxyoutube embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Dan klik save.
Kemudian untuk kode yang dari youtube juga harus anda rubah menjadi seperti ini :
<div class="embed-box">
<iframe src="//www.youtube.com/embed/lf_cUxnnu7E" frameborder="0" allowfullscreen></iframe>
</div>
Kode berwarna purple yang tercetak tebal diatas bisa anda ganti url video semat youtube yang anda inginkan.
Untuk mengujinya silahkan buka blog ini di berbagai ukuran dengan RESPONSIVE TOOL.
Cara ini pun dapat anda gunakan untuk ditambahkan ke dalam kode iklan adsense anda agar 100% responsive,anda tinggal memainkan kode cssnya seperti
.embed-box-youtube menjadi .adsense-box
dan seterusnya serta kode pemanggilnya menjadi dari <div class="embed-box"> menjadi <div class="adsense-box">.
Saya sendiri saat ini belum menerapkan kode ini di AdSense karena lagi malas mengutak atik html.
semoga sangat bermanfaat tutorial yang amburadul kali ini.
Advertisement