Tuesday, December 19, 2017

√ Cara Embed Video Yang Di Upload Di Blogger Biar Responsive

Cara Embed Video Yang di Upload di Blogger Supaya Responsive » Pasti teman-teman sudah pada tahu dengan fitur upload video di blogger, Namun nyatanya walapun sudah pada tahu fitur yang satu ini sangatlah jarang dipakai oleh sebagian besar bloger dengan banyak sekali alasan tertentu seperti hasil video tidak dapat responsive hingga dengan alasannya tidak dapat di jadikan uang ibarat Youtube.Cara Embed Video Yang di Upload di Blogger Supaya Responsive √ Cara Embed Video Yang di Upload di Blogger Supaya Responsive


Namun berdasarkan saya duduk masalah diuangkan itu tidaklah menjadi masalah, Toh kita juga akan mendapat penghasilan dari iklan yang kita pasang di postingan tersebut.


Fitur ini dapat sangat berkhasiat apalagi jikalau kau mempunyai blog dengan topik tutorial, jadi mulai ketika ini yuk kita manfaatkan fitur yang sudah diberikan google secara gratis ini.


Nah pada kesempatan kali ini saya akan membagikan kepada teman-teman panduan Cara Embed Video Yang di Upload di Blogger Supaya Responsive, dan biar tutorial ini dapat memperlihatkan solusi bagi kau yang ingin mengupload video di blogger namun takut video tersebut tidak responsive.


Cara Embed Video Yang di Upload di Blogger Supaya Responsive


Pada panduan ini saya rasa teman-teman sudah pada tahu bagaimana cara upload video di blogger, jadi saya tidak perlu menuliskan tutorialnya, Namun disini saya hanya fokus memperlihatkan panduan bagaimana supaya video yang kita upload dapat tampil responsive bahkan juga suport template AMP. Langsung saja simak panduan dibawah ini.


Langkah 1 : Masuk kedalam dasboard blogger yang kau miliki.


Langkah 2 : Kemudian buat post gres dalam mode compose bukan HTML, Lanjut klik icon video ibarat gambar dibawah ini. Cara Embed Video Yang di Upload di Blogger Supaya Responsive √ Cara Embed Video Yang di Upload di Blogger Supaya Responsive


Langkah 3 : Silahkan upload video yang kau inginkan, dan tunggu hingga proses selesai.


Langkah 4 : Jika proses upload sudah selesai, Silahkan pindahkan mode penulisan dari compose ke HTML untuk mendapat isyarat dari video tersebut. Biasanya kodenya ibarat ini.

Script
 <object id=”BLOG_video-c90f4624c2abcde” class=”BLOG_video_class” contentid=”c90f4624c2abcde” width=”320″ height=”266″ ></object>

Catatan : Kode yang akan kita butuhkan hanyalah isyarat yang saya tandai dengan warna merah tersebut


Panduan selanjutnya akan saya pecah menjadi dua panduan, ialah untuk blog AMP dan blog Non AMP.


Cara Embed Video Yang di Upload di Blogger Supaya Responsive di Blog Non AMP


Tambahkan CSS dibawah ini di Style blog kamu. 

Script
 .video-responsive {

position: relative;

padding-bottom: 56.25%;

height: 0;

overflow: hidden;

}

.video-responsive video {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

border:0;

}

Kemudian gunakan isyarat dibawah ini untuk menampilkan video di postingan. 

Script
 <div class=”video-responsive”>

<video controls>

<source type=”video/mp4″ src=”https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI”>

</video>

</div>

Ganti tulisan ID VIDEO SIMPAN DI SINI dengan isyarat kau yang sudah saya tandai dengan text warna merah tadi.


Cara Embed Video Yang di Upload di Blogger Supaya Responsive di Blog AMP


Langkah pertama, Silahkan pasang js amp-video berikut ini di Edit HTML, Namun jikalau kau sudah pernah memasangnya atau sudah ada maka kau tidak perlu memasangnya lagi. 

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

Untuk menampilkan Video di postingan yang suport AMP silahkan gunakan isyarat berikut ini. 

Script
 <amp-video width=”480″ height=”270″ layout=”responsive” controls>

<source type=”video/mp4″ src=”https://www.blogger.com/video-play.mp4?contentId=ID VIDEO SIMPAN DI SINI”>

</amp-video>

Ganti tulisan ID VIDEO SIMPAN DI SINI dengan isyarat kau yang sudah saya tandai dengan text warna merah tadi.


Nah itulah panduan Cara Cara Embed Video Yang di Upload di Blogger Supaya Responsive di Blog AMP ataupun Non AMP, Semoga dengan panduan ini dapat memperlihatkan manfaat bagi kita semua.



Sumber aciknadzirah.blogspot.com