• Google
  • Blogger
  • WhatsApp
  • Design Contest
  • Facebook
  • Twitter
  • Instagram
  • Linkedin
  • Line
  • Payoneer
  • Privacy
  • Thursday 13 December 2018

    Membuat AMP Video Youtube

    Membuat AMP Video Youtube


    Perubahan besar - besaran pada semua struktur pengkodean dalam desain sebuah website, sejak Google membuat aturan, dessain website harus mengikuti kode yang dibuat oleh Google, yang diklaim resfonsive mobile, yang mereka sebut AMP yaitu Acceleration Mobile Page. Termasuk dalam penambahan sebuah video youtube pada halaman website.




    Sebelumnya dalam penambahan video youtube di halaman website, cukup dengan menambahkan kode iframe, sekarang mau tidak mau harus menggunakan struktur kode amp, agar dapat di index di penelusuran Google. Untuk membuat struktur Amp Youtube, Google membuat dua model yang bisa dibuat di halaman website.



    1. Model AMP iframe



    Untuk model ini, pertama tambahkan kode javascript di bawah ini, di bawah <Head>;


    <script async custom-element="amp-youtube" src="https://cdn.ampproject.org/v0/amp-youtube-0.1.js"></script>
    


    Kemudian tambahkan kode dibawah ini dimana saja yang ingin Anda letakkan, di bawah <body>;


    <amp-iframe width="500" height="310"
        sandbox="allow-scripts allow-same-origin"
        layout="responsive"
        frameborder="0"
        src="https://www.youtube.com/embed/Kode_id_video">
    </amp-iframe>
    


    Ukuran lebar dan panjang dapat disesuaikan display, dan kode_id_video, ganti dengn kode id video youtube yang ingin ditanyangkan di halaman website



    2. Model AMP youtube



    Untuk model ini, pertama tambahkan kode javascript di bawah ini, di bawah <Head>;


    <script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
    


    Kemudian tambahkan kode dibawah ini dimana saja yang ingin Anda letakkan, di bawah <body>;


    <amp-youtube
        data-videoid="kode_id_video"
        layout="responsive"
        width="500" height="310"></amp-youtube>
    


    Ukuran lebar dan panjang dapat disesuaikan display, dan kode_id_video, ganti dengn kode id video youtube yang ingin ditanyangkan di halaman website







    Pada struktur lama masih dapat Anda gunakan, Anda dapat menggunakan kode di bawah ini, di bawah </Head>;


    <script>
    //<![CDATA[
    $(document).ready(function() {
        $('iframe[src*="youtube.com"]').wrap('<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;margin:0 auto;width:100%"></div>');
        $('iframe[src*="youtube.com"]').css({
            "position": "absolute",
            "top": "0",
            "left": "0",
            "width": "100%",
            "height": "100%",
            "border": "0"
        });
        $('iframe[src*="youtube.com"]').each(function() {
            $(this).attr("data-src", $(this).attr("src"));
            $(this).attr("src", "")
        });
    });
    
    function init() {
        var vidDefer = document.getElementsByTagName('iframe');
        for (var i = 0; i < vidDefer.length; i++) {
            if (vidDefer[i].getAttribute('data-src')) {
                vidDefer[i].setAttribute('src', vidDefer[i].getAttribute('data-src'));
            }
        }
    }
    window.onload = init;
    //]]>
    
    


    Kemudian simpan kode di bawah ini di bawah, <body>;


    <iframe width="560" height="315" src="https://www.youtube.com/embed/kode_id_video" frameborder="0" allowfullscreen="" data-src="https://www.youtube.com/embed/kode_id_video" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; border: 0px;"></iframe>
    


    Demikan cara menambahkan membuat AMP Video Youtube.


    Semoga bermanfaat.




    Artikel Terkait



    Membuat AMP Video Youtube
    Tampilan Baru Chrome 70.0.3538.80
    Setelan Download Chrome 70.0.3538.80 Hemat Pulsa Hemat Memori Penyimpanan
    Tampilan Baru Chrome 70.0.3538.80
    Chrome Tidak Bisa Lagi Di Jelly Bean
    Keamanan Akun Media Sosial Menggunakan Google Authenticator
    Berkarir Di Google - Cara Mengirim Lamaran Kerja
    Google Translate Fitur Baru Screenshot Camera Translate
    Penelusuran Vertikal Dari Search Engine Google
    Gmail Redesign 2018 Penambahan Fitur Baru
    Google Street View
    Tampilan Terbaru Chrome
    Google Duo Dengan Besaran Kuota
    Tips Mengamankan Account Google Jika Handphone Dicuri
    Tip Menambah Profile Google Di Blog Dan Web Page
    Google Pixel 2
    Switch Account Email Yahoo Dan Google

    No comments: