Membuat Responsive Tampilan Video Youtube, Daripada belum ada artikel baru yang bisa saya sajikan hari ini plus belum bisa bereksperimen dikarenakan kesehatan saya masih terganggu kebetulan dari jalan-jalan di blog teman, saya menemukan artikel yang menurut saya bisa dijadikan postingan kali ini siapa tahu saja ada teman-teman yang menginkan widget ini untuk dijadikan pajangan di blognya. Widget ini sebenarnya sangat cocok buat Blog yang berbau video tapi tidak menutup kemungkinan blog-blog yang lain juga bisa memasangnya.
Seperti yang telah dijelaskan oleh Mas Adhy pada blognya kompiajaib.com bahwa tampilan video youtube ini udah bisa menyesuaikan dengan tampilan deivice atau bahasa kerennya responsive, disamping itu juga Anda tidak perlu khawatir mengenai error validasi HTML5 karena widget yang satu ini sudah beliau modifikasi sedemikian rupa sehingga tidak terdapat error validasi. Simak tutorial di bawah ini.
1. Perhatikan code ini di bawah ini, silahkan tempelkan di atas </head>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript'/>
Catatan : Jika sudah terdapat code seperti ini versi berapapun pada template Anda silahkan lewati. Perlu diingat bahwa jQuery hanya perlu terdapat 1 tidak boleh lebih jika lebih maka beberapa elament seperti slider atau yang lainnya yang dijalankan oleh jQuery ini tidak bisa berfungsi dengan baik.
2. Selanjutnya letakkan CSS berikut di atas
]]></b:skin>
atau di dalam
</style>
.videoyoutube{
text-align: center;
background:linear-gradient(to bottom, #fefefe 0%, #d1d1d1 100%);
border:1px solid #A8A8A8;
border-radius:5px;
margin:20px auto;
width:80%;
box-shadow: 1px 30px 30px -26px #818181;
}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
margin:8px;
}
.video-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border:0;
}
3. Kemudian letakkan script berikut tepat diatas
</body>
atau
</head>
<script type='text/javascript'>
//<![CDATA[
setTimeout(function(){
$('.video-youtube').each(function(){
$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data('src')+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5000);
//]]>
</script>
4. Terakhir, silahkan letakkan code pemanggilnya di bawah ini pada halaman Post, Ingat untuk peletakkan harus pada halaman HTML bukan pada Compose
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="//www.youtube.com/embed/fcr2VSNf7LI"></div>
</div>
</div>
Catatan : Kode yang diblock dengan warna merah merupakan ID embed video yotube, untuk mendapatkannya silahkan masuk pada situs penyedia video seperti
youtube.com, kemudian pilih video yang akan Anda letakkan di posting, selanjutnya klik share maka disitu terdapat ID video embed yang nantinya Anda ganti dengan ID embed yang diblock di atas.
DEMO Ariel Noah - HERO
Resource :
http://www.kompiajaib.com/2014/02/modifikasi-tampilan-video-youtube.html
http://basicuse.net/articles/pl/textile/html_css/resizing_youtube_and_html5_videos_proportionally_using_css_for_responsive_web_design
ADS HERE !!!