Membuat Embed Video Lebih Keren Dengan Frames MacBook di Blogger

Membuat Embed Video Lebih Keren Dengan Frames MacBook di Blogger - Siapa yang suka banget embed video ke dalam postingan blog? Nah, pada kesempatan kali ini saya akan memberikan kabar baik bagi kamu semua yang suka memasukkan video di dalam postingan blog. Apa itu? Pada artikel kali ini saya akan berbagi sedikit kode untuk mempercantik tampilan embed video kamu, jadi tidak hanya frame default yang bisa kita tampilkan.

Apa sih embed video itu?

Embed video adalah kegiatan memasukkan sebuah video kedalam blog atau website dengan menggunakan url video tersebut. Umumnya, sebuah embed video dikemas dengan frame yang di isi oleh url video yang kita inginkan. Jadi, sewaktu halaman tersebut dibuka maka otomatis frame yang telah kita isi dengan url video akan ikut termuat didalam halaman blog kita. Kamu bisa melakukan embed video dari berbagai situs berbagi video seperti, youtube maupun vimoe.

Memang kadang sebagai seorang blogger, kita kadang membutuhkan embed video didalam postingan blog untuk menunjang kualitas artikel yang kita buat. Meski ada yang bilang, jika kita terlalu banyak menggunakan frame diblog, hal tersebut akan berdampak buruk pada kualitas SEO blog yang kita kelola. Meski begitu tetap saja ada blogger yang memasukkan video ke dalam postingan blog, termasuk saya juga.

Menurut saya, seorang pemilik blog lebih tahu kebutuhan yang dibutuhkan oleh blog yang dikelolanya. Jadi, jika kita memang membutuhkan embed video dipostingan kenapa tidak? Jika berfikir masalah seo, bukannya kita sudah bisa mengakalinya dengan menggunakan shortcode dipostingan agar frame video yang kita embed tidak ikut terbawa ke dalam postingan.

Didalam artikel ini saya akan memberikan tiga script yang berhubungan dengan embed video, baik itu video youtube mau vimoe. Tiga script ini juga memiliki peran dan fungsi yang berbeda juga, untuk lebih jelasnya silahkan disimak ulasan lengkapnya dibawah ini.

Dipostingan ini kamu bisa mendapatkan:

1. Membuat embed video dipostingan blog lebih responsive
2. Manampilkan video didalam frame yang responsive dengan pure CSS
3. Menampilkan video didalam frame image macbook yang responsive

Kamu bisa memilih salah satu script diatas, dan yang pasti semuanya responsive kok. :)

Baiklah, bagi kamu yang mungkin udah penasaran dengan bagaimana hasil penampilan dari kode kali ini. Langsung saja berikut ini Cara Membuat Embed Video Lebih Responsive dan Keren di Blogger. Selamat menyimak..

1. Membuat Embed Video Dipostingan Blog Lebih Responsive

Biasanya ketika kita melakukan embed video dari youtube atau situs lain kedalam postingan blog, shortcode yang kita dapatkan telah memiliki nilai properti seperti height dan width yang suda ditetapkan. Jadi, ketika seseorang membuka halaman blog kita yang memiliki embed video dengan resolusi layar lebih kecil dari yang ditentukan, maka hal ini akan membuat video kita menjadi kurang responsive dan tidak enak untuk dilihat.

Nah, jadi bagi kamu yang hanya mengingkan video yang kamu embed bisa tampil lebih responsive, kamu bisa menggunakan kode dibawah ini. Kode berikut ini hanya terdiri dari penambahan sedikit css untuk menentukan height dan width dari video yang kita embed, hal ini akan menentukan sesuai dengan resolusi layar yang membuka halaman blog kita.

Masukkan kode css dibawah ini kedalam template kamu, bisa diatas </b:skin> atau </style>

.video_outer_wrap {
        width: 100%;
        max-width: 560px;
        margin: 15px auto;
    }
    .video_wrap {
        position: relative;
        padding-bottom: 56%;
        padding-top: 0px;
        height: 0;
        background-color: #000 !important;
    }
    .video_wrap iframe,
    .video_wrap object,
    .video_wrap embed {
        position:absolute;
        top:0;
        width:100%;
        height:100%;
    }

Dan berikut ini shortcode yang bisa kamu gunakan untuk embed video kamu didalam postingan blog, gunakan dalam mode HTML.

<div class="video_outer_wrap">
 <div class="video_wrap bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerv2lFU" frameborder="0" allowfullscreen></iframe> </div>
</div>

Cara Menggunakan Shortcode?

Untuk menggunakan shortcode diatas, kamu tinggal menyalin kode tersebut dan ketika kamu ingin memasukan video kedalam postingan blog, kamu tinggal mengganti url video yang saya tandai dengan url video yang kamu inginkan.

2. Manampilkan Video Didalam Frame yang Keren Dengan Pure CSS

Nah, ini script embed video yang harus kamu coba. Saya juga menyukai yang satu ini karna dibuat dengan pure css dan memiliki tampilan yang menarik dan memiliki loading yang cepat. Cara yang satu ini juga sudah dibuat responsive juga kok, jadi kamu tidak perlu ragu untuk menggunakannya.

Live Demo

Bagaimana? menarik kan. Bagi kamu yang ingin menggunakan cara yang ini, silahkan ukuti langkah-langkah dibawah ini untuk menerapkannya diblog kalian.

Masukkan kode css dibawah ini kedalam template kamu, bisa diatas </b:skin> atau </style>

.semua_tutorialku_blog_wrap {
        width: 100%;
        max-width: 560px;
     

  margin: 30px auto;
}
.semua_tutorialku_blog_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 20px solid #3498db;
 border-radius: 10px; transition: all 3s ease-in-out;
 cursor:pointer;
}
.semua_tutorialku_blog_inner:hover {
    border: 20px solid #e74c3c;
}
.semua_tutorialku_blog_inner iframe,
.semua_tutorialku_blog_inner object,
.semua_tutorialku_blog_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.semua_tutorialku_blog_bayangan
{
  position: relative;
}
.semua_tutorialku_blog_bayangan:before, .semua_tutorialku_blog_bayangan:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 30px 20px #777;
  -moz-box-shadow: 0 30px 20px #777;
  box-shadow: 0 25px 20px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.semua_tutorialku_blog_bayangan:after
{
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
  right: 10px;
  left: auto;
}
@media all and (max-width: 400px) {
.semua_tutorialku_blog_inner {
    border: 7px solid #e74c3c !important;
}
.semua_tutorialku_blog_bayangan:before, .semua_tutorialku_blog_bayangan:after {
    bottom: 9px !important;
} }

Dan berikut ini shortcode yang bisa kamu gunakan untuk embed video kamu didalam postingan blog, gunakan dalam mode HTML.

<div class="semua_tutorialku_blog_wrap">
 <div class="semua_tutorialku_blog_inner semua_tutorialku_blog_bayangan">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerv2lFU?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Cara Menggunakan Shortcode?

Untuk menggunakan shortcode diatas, kamu tinggal menyalin kode tersebut dan ketika kamu ingin memasukan video kedalam postingan blog, kamu tinggal mengganti url video yang saya tandai dengan url video yang kamu inginkan.

3. Menampilkan video didalam frame image macbook yang responsive

Jika cara diatas hanya menggunakan pure css untuk mempercantik tampilan embed video kita, nah script yang ketiga ini menggunakan image sebagai frame video kita nantinya. Tentu pasti akan lebih menarik lagi hasilnya, apalagi image yang akan kita gunakan berupa macbook atau laptop. Jadi kita akan menampilakn embed video didalam sebuah macbook. Penasaran? silahkan lihat demo-nya dibawah ini.

live demo

Bagaimana? sangat menarik bukan tampilannya. Nah, bagi kamu yang ingin mencoba menggunakan script kode embed video seperti pada demo tersebut. Silahkan kamu ikuti langkah penerapannya dibawah ini.

Tambahkan kode dibawah ini kedalam template kamu, bisa diatas </b:skin> atau </style>

.semua_tutorialku_blog {
        width: 100%;
        max-width: 650px;
        margin: 15px auto;
    }
    .semua_tutorialku_blog_wrap {
        position: relative;
        padding-bottom: 43%;
        padding-top: 0;
        height: 0;
        overflow: hidden;
        -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbhKQ494pODU8j4BntQQrQfq5rw9BtEOW6VLJCYkDk-nLZW-BjHutcJiGLizGbPbBh63PvTZGaM_m0sD8S3WjMtIZVf_Q3742AuWxbRg3mn_wDG5RB534o4Ut-Y4MekNjOdeHlmVXJgs/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
        -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbhKQ494pODU8j4BntQQrQfq5rw9BtEOW6VLJCYkDk-nLZW-BjHutcJiGLizGbPbBh63PvTZGaM_m0sD8S3WjMtIZVf_Q3742AuWxbRg3mn_wDG5RB534o4Ut-Y4MekNjOdeHlmVXJgs/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
        -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbhKQ494pODU8j4BntQQrQfq5rw9BtEOW6VLJCYkDk-nLZW-BjHutcJiGLizGbPbBh63PvTZGaM_m0sD8S3WjMtIZVf_Q3742AuWxbRg3mn_wDG5RB534o4Ut-Y4MekNjOdeHlmVXJgs/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
        border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgSbhKQ494pODU8j4BntQQrQfq5rw9BtEOW6VLJCYkDk-nLZW-BjHutcJiGLizGbPbBh63PvTZGaM_m0sD8S3WjMtIZVf_Q3742AuWxbRg3mn_wDG5RB534o4Ut-Y4MekNjOdeHlmVXJgs/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
        border-color: rgba(0, 0, 0, 0);
        border-width: 27px 76px 55px 76px;
        border-style: inset;
    }
    .semua_tutorialku_blog_wrap iframe, .semua_tutorialku_blog_wrap object, .semua_tutorialku_blog_wrap embed {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        background-color: #ddd;
    }
    @media (max-width: 500px) {
    .semua_tutorialku_blog_wrap {
        border-width: 20px 62px 40px 62px;
    }
    @media all and (max-width: 400px) {
    .semua_tutorialku_blog_wrap {
        border: none !important;
    }
    }

Dan berikut ini markup HTML yang bisa kamu gunakan untuk menampilkan frame image seperti diatas.

<div class="semua_tutorialku_blog">
 <div class="semua_tutorialku_blog_wrap">
<iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerv2lFU?rel=0&amp;theme=dark&amp;controls=1&amp;showinfo=0&amp;autohide=0" frameborder="0" allowfullscreen=""></iframe>
 </div>
</div>

Cara Menggunakan?

Untuk menggunakan markup HTML diatas, masih sama penerapannya seperti pada tutorial nomor dua. Kamu hanya tinggal mengganti ID atau url video diatas dengan url video yang kamu inginkan. Ingat, masukkan script diatas dalam mode HTML dipostingan blog kamu.

***

Nah, itulah dia kreasi kita kali ini. Semoga kamu bisa menyukainya. Bagi kamu yang memiliki pertanyaan atau masalah ketika menerapkan tutorial diatas, silahkan ajukan dikotak komentar dibawah ini. Saya akan membantu kamu semaksimal mungkin, yang saya bisa. Semoga bermanfaat.

Oiya, jangan lupa kirim masukan kamu dibawah ini ya. Agar saya bisa membuat artikel yang lebih baik lagi kedepannya. Sampai jumpa..