Skip to main content
Home Blogger Youtube Cara Membuat Popup Auto Play Video Youtube Di Blog Amp

Cara Membuat Popup Auto Play Video Youtube Di Blog Amp

Pup up video youtube adalah salah satu cara yang bisa anda gunakan untuk menampilkan video youtube di blog yang tentunya jika pengunjung atau user mengunjungi blog anda maka secara otomatis akan menampilkan pop up video youtube di tengah artikel atau di home page blog, sehingga pengunjung nantinya akan melihat video youtube yang anda sematkan di blog kurang lebih seperti video melayang di blog gitu.

Nah pada pembahasan kali ini saya akan memberikan tutorial bagaimana caranya membuat pop up video youtube di blog amp

Untuk memasang video youtube di blog amp sebenarnya cukup mudah yang perlu anda lakukan adalah menggunakan script amp-youtube dan menyematkannya di blog artikel, akan tetapi sedikit berbeda kali ini saya akan sedikit memodifikasi tampilan video youtube menjadi pop up.

Sebenarnya pada dasarnya saya menggunakan kode pop up untuk amp notification subscribe artikel berlangganan dan pop up notification fanspage facebook di blog yang telah seya jelaskan di artikel sebelumnya.

Baca juga 

Nah jadi kita modifikasi/mengganti kode subscribe atau pop up fanspage facebook dengan kode amp-youtube disini juga anda bisa menggunakan auto play youtube, maka video akan berputar otomatis jika ada yang berkunjung di blog tanpa perlu mengklik video nya terlebih dahulu

Jika anda tertarik ingin membuat pop up video youtube auto play di blog berikut ini langkah-langkahnya :

Membuat Pop Up Auto Play Youtube

Demo

1. Pertama simpan CSS berikut ini di bawah style amp-custom

@font-face {    font-family: 'Roboto';    font-style: normal;    font-weight: 400;    src: local('Roboto'), local('Roboto-Regular'), url(https://fonts.gstatic.com/s/roboto/v16/CWB0XYA8bzo0kSThX0UTuA.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/2UX7WLTfW3W8TclTUvlFyQ.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/QHD8zigcbDB8aPfIoaupKOvvDin1pK8aKteLpeZ5c0A.ttf) format('truetype');   }   @font-face {    font-family: 'Roboto';    font-style: normal;    font-weight: 500;    src: local('Roboto Medium'), local('Roboto-Medium'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUVtXRa8TVwTICgirnJhmVJw.woff2) format('woff2'), url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUT8E0i7KZn-EPnyo3HZu7kw.woff) format('woff'),url(https://fonts.gstatic.com/s/roboto/v16/RxZJdnzeo3R5zSexge8UUSZ2oysoEQEeKwjgmXLRnTc.ttf) format('truetype');   }     *{       -moz-box-sizing:border-box;       -webkit-box-sizing:border-box;       box-sizing:border-box     }     .notifbox {       width: 100%;       height: 100%;       position: fixed;       top:0;       left:0;       display: flex;       align-items: center;       justify-content: center;       z-index: 10000;     }     .notif_box{       background:#fff;       color:#555;       font-family:Roboto,sans-serif;      position:absolute;      padding:0;      top:15%;      transition:all .3s ease-in-out;       width:90%;      left:50%;       margin-left:-45%;      z-index:99;      border-radius:4px;      box-shadow:0 9px 46px 8px rgba(0, 0, 0, .14),0 11px 15px -7px rgba(0, 0, 0, .12),0 24px 38px 3px rgba(0, 0, 0, .2);       z-index: 2;       overflow:hidden;     }     .notif_box p{       margin:0;       padding:10px 20px;       font-size:14px;       font-weight: 400;       line-height:1.3;     }     .notif_box p a {       color:red;       text-decoration: none;       font-weight: 500;     }     .notif_box p a:hover {       color:black;     }     .notifbox .close_notifbox {      background: 0 0;      border: none;       padding:0;      color: #efefef;      font-size: 30px;      position: absolute;      top: 7px;      right: 5px;      cursor: pointer;       width:20px;       height:20px;      line-height: 20px;       text-align: center;       z-index:2;     }     .notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus {       outline: none;     }     .notifbox .close_notifbox:hover {      color: red;     }     .slideInDown {       -webkit-animation-name: slideInDown;       animation-name: slideInDown;       -webkit-animation-duration: 1s;       animation-duration: 1s;       -webkit-animation-fill-mode: both;       animation-fill-mode: both;     }     @-webkit-keyframes slideInDown {       0% {       -webkit-transform: translateY(-100%);       transform: translateY(-100%);       visibility: visible;     }      100% {       -webkit-transform: translateY(0);       transform: translateY(0);       }     }     @keyframes slideInDown {      0% {       -webkit-transform: translateY(-100%);       transform: translateY(-100%);       visibility: visible;       }     100% {      -webkit-transform: translateY(0);      transform: translateY(0);       }     }

2. Kemudian simpan Js amp-youtube

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

3. Langkah terakhir simpan kode HTML berikut ini di atas kode </body> atau &lt;!--</body>

<div class='notifbox' id='notifbox'>
      <div class='notif_box slideInDown'>
      <button class='close_notifbox' on='tap:notifbox.hide' role='button' tabindex='0' title='Close'>&amp;times;</button>
 <amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y" autoplay> </amp-youtube>    
      </div>
    </div>

Keterangan:

Ganti data video id dengan id video anda

Menampilkan Pop up Youtube Auto Play Dengan Amp-User

Namun jika anda ingin menampilkan widget pop up auto play youtube hanya sekali saja anda bisa gunakan amp-user-notification, jadi dengan menggunakan amp-user pengunjung tidak akan terganggu jika telah menutup widget atau me-refresh halaman blog dengan pop youtube hanya muncul sekali saja, ya tentunya sebelum pengunjung membersihkan cookie di prambannya.

1. Pertama simpan CSS di bawah ini

*{ -moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box } .notifbox { width: 100%; height: 100%; position: fixed; top:0; left:0; display: flex; align-items: center; justify-content: center; z-index: 10000; } .notif_box{ background:#fff; color:#555; font-family:Roboto,sans-serif; position:absolute; padding:0; top:15%; transition:all .3s ease-in-out; width:90%; left:50%; margin-left:-45%; z-index:99; border-radius:4px; box-shadow:0 9px 46px 8px rgba(0, 0, 0, .14),0 11px 15px -7px rgba(0, 0, 0, .12),0 24px 38px 3px rgba(0, 0, 0, .2); z-index: 2; overflow:hidden; } .notif_box p{ margin:0; padding:10px 20px; font-size:14px; font-weight: 400; line-height:1.3; } .notif_box p a { color:red; text-decoration: none; } .notif_box p a:hover { color:black; } .notifbox .close_notifbox { background: 0 0; border: none; padding:0; color: #efefef; font-size: 30px; position: absolute; top: 7px; right: 5px; cursor: pointer; width:20px; height:20px; line-height: 20px; text-align: center; z-index:2; } .notifbox .close_notifbox:focus,.notifbox .done_notifbox:focus { outline: none; } .notifbox .close_notifbox:hover { color: red; } .slideInDown { -webkit-animation-name: slideInDown; animation-name: slideInDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; } @-webkit-keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes slideInDown { 0% { -webkit-transform: translateY(-100%); transform: translateY(-100%); visibility: visible; } 100% { -webkit-transform: translateY(0); transform: translateY(0); } }

2. Simpan Js amp-user-notification, Js amp-youtube dan amp-analytics di bawah ini

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

3. Langkah selanjutnya simpan kode HTML di bawah ini

<amp-user-notification id="my-notification"   layout="nodisplay">     <div class="notifbox" id="notifbox">       <div class="notif_box slideInDown">       <button class='close_notifbox' on='tap:my-notification.dismiss' role='button' tabindex='0' title='Close'>&amp;times;</button>       <center><amp-youtube width="480" height="270" layout="responsive" data-videoid="lBTCB7yLs8Y" autoplay> </amp-youtube></center>       </div>     </div>   </amp-user-notification>

Keterangan:

Ganti data video id dengan id video anda

Penting untuk setiap kode dan langkah-langkahnya anda bisa menggunakan salah satunya tergantung kebutuhan anda tentunya.

Menampilkan Pop Up Widget Auto Play Youtube Di Halaman Tertentu

Nah untuk trik ini anda bisa sesusikan halaman mana saja yang ingin menampilkan widget pop up video youtube auto play. Dengan begitu juga ini bisa meringankan loading blog anda karena kode widgetnya kita simpan di tag conditional khusus sehingga halaman lain tidak akan berpengaruh. Untuk trik ini juga anda bisa pakai kode widget pop up auto play youtube untuk amp-user- notification ataupun trik yang pertama yang saya jelaskan di atas tadi

bungkus kode HTML widget pop up auto play youtube dengan doke ini

<b:if cond='data:view.url == data:view.url params { amp: &quot;1&quot; }'> <b:if cond='data:blog.url in {&quot;URL HALAMAN YANG INGIN MENAMPILKAN VIDEO&quot;,&quot;URL HALAMAN YANG INGIN MENAMPILKAN VIDEO?amp=1&quot;}'> Widget HTML Popup Auto Play Youtube<b:if></b:if>

Nah begitulah caranya membuat pop up video youtube di blog amp semoga bermanfaat. Jika ada pertanyaan atau yang mau di tanyakan seputar artikel di atas silakan tuliskan masalah atau komentar anda, terimakasih

Tag:

Blogger, Youtube

Berbagi Itu Peduli :

You Might Also Like:

Comment Policy: Silahkan tuliskan komentar Anda yang sesuai dengan topik postingan halaman ini. Komentar yang berisi tautan tidak akan ditampilkan sebelum disetujui.
Buka Komentar