Pastikan Anda melakukan hal yang benar ∓ hanya membagikan konten responsif! Izinkan saya menunjukkan kepada Anda bagaimana Anda dapat membuat video youtube Anda ramah seluler.
1. Temukan video di Youtube yang ingin Anda bagikan, klik SHARE-> EMBED ∓ salin kodenya.
2. Tempel kode yang disematkan ke dalam posting atau halaman Anda, itu akan berubah menjadi seperti ini:
</iframe src="https://www.youtube.com/embed/39_OmBO9jVg" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"> </iframe> 3. Pada Postingan kita menggunakan kode div, menjadi seperti ini:
<div class="videoyoutube">
<div class="video-responsive">
<div class="video-youtube loader" data-src="https://www.youtube.com/embed/39_OmBO9jVg"></div>
</div>
</div>4. Sebelumnya kita harus memasang CSS nya dulu untuk membuat video menjadi responsif. Jika Anda menggunakan Blogger, buka Template-> Edit HTML dan tambahkan di atas ]]> </ b: skin> . Jika Anda menggunakan WordPress, masukkan di bawah stylesheet.css Anda (biasanya ditempatkan di bawah area EDITOR )
/* Youtube Responsive */
.videoyoutube{text-align:center;margin:auto;width:100%;}
.video-responsive{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;}
.video-responsive iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.video-responsive {
position: relative;
padding-bottom: 56.25%;
height: 0;
overflow: hidden;
}5. Selanjutnya tambahkan script tepat di atas kode </body> dengan kode ini :
<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>6. Dan jangan lupa blog Anda sudah dilengkapi dengan jquery library seperti di bawah ini (berapa pun versinya)
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js' type='text/javascript' />