Cara Membuat Embed Video Youtube Menjadi Responsive di Blog

adscblog

Mungkin anda pernah membuat Suatu Article yang dimana isi article tersebut mengandung atau menyertakan Video dari Youtube dengan menanamkan Embed nya kedalam Postingan Sobat,memang benar menyimpan Video Youtube di postingan kita akan mempermudah pengunjung untuk memahamai isi dari article tersebut selain itu juga dengan menyimpan Video dari Youtube akan memperlengkap Postingan kita

Tidak ada masalah apabila kita menyimpan Video Youtube dengan Embed,namun yang jadi masalah kita bukan lah Video dari Youtube nya melainkan kesesuaian Video tersebut dengan template kita,terkadang ketika kita menyimpan salah satu Video di Blog kita salah satu nya di artikel terkadang Video tersebut kebesaran lah ataupun terlalu tinggi,ko tidak sesuai dengan template blog kita,padahal template kita sudah kita desain agar Responsive tetapi ko Video tersebut kebesaran atau sebagai nya

Dengan kejadian seperti itu anda tidak perlu merasa bingung atau juga jangan sampai Video yang ingin anda posting di halaman blog anda di hapus kembali,untuk mengatasi hal tersebut kita bisa membuat Video Youtube sesuai dengan Template blog kita tanpa kita merubah tampilan Template nya,dan cara ini tidak hanya untuk Video Youtube saja ,melainkan Vivo ataupun Video yang lain nya juga bisa kita atasi dengan cara ini

Bagaimana Agar Video menjadi Responsive di blog

Ketika kita ingin memasang sebuah Video dari Youtube ataupun dari Vimeo tentunya kita menginginkan Video tersebut bisa sesuai dengan Template blog yang kita miliki ketika seseorang melihat video tesebut dari Ponsel ataupun perangkat lain yang resolusi nya lebih kecil

Maka apabila Video tersebut bisa sesuai dengan template blog yang kita miliki maka kita ataupun pengunjung blog kita akan merasa nyaman dengan Video yang sesuai dengan template tersebut namun bagimana untuk membuat Video dari Youtube tersebut bisa menjadi Responsive

Untuk membuat Video dari Youtube ataupun Vimeo ini menjadi Responsive,silahkan anda ikuti langkah-langkah penerapan nya di bawah ini

Disini saya akan memberikan 3 Pareasi untuk penyimpanan Video Youtube di blog ini agar tampilan nya menjadi Indah

1) Untuk Video Youtube Tampilan Biasa

 Untuk Tampilan Video Youtube dengan tampilan Biasa anda bisa menambahkan CSS berikut

.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%;
    }

Sedangkan HTML yang harus di pasangan di postingan nya adalah sebagai berikut

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

3) Pasang Embed Video Youtube dengan menggunakan CSS

Tampilan ini mungkin akan anda sukai,karena tampilan yang ini lebih menarik dari tampilan penerapan Video yang pertama,tampilan yang kedua ini tampilan Video Youtube nya akan di ukir dengan bingkai yang begitu menarik dan mungkin andapun akan menyukai tampilan yang kedua ini

.tbn_css_frame_wrap {
    width: 100%;
    max-width: 560px;
    margin: 30px auto;
}
.tbn_css_frame_wrap_inner {
    position: relative;
    padding-bottom: 53%;
    height: 0;
    background-color: #000 !important;
    border: 15px solid #CACACA;
}
.tbn_css_frame_wrap_inner iframe,
.tbn_css_frame_wrap_inner object,
.tbn_css_frame_wrap_inner embed {
    position:absolute;
    top:0;
    width:100%;
    height:100%;
}
.bottomshadows
{
  position: relative;
}
.bottomshadows:before, .bottomshadows:after
{
  z-index: -1;
  position: absolute;
  content: "";
  bottom: 0px;
  left: 10px;
  width: 50%;
  top: 80%;
  max-width:300px;
  background: #777;
  -webkit-box-shadow: 0 15px 10px #777;
  -moz-box-shadow: 0 15px 10px #777;
  box-shadow: 0 15px 10px #777;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}
.bottomshadows: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) {
.tbn_css_frame_wrap_inner {
    border: 7px solid #CACACA !important;
}
.bottomshadows:before, .bottomshadows:after {
    bottom: 9px !important;
} }

Silahkan anda terapkan Css di atas di template anda,dan untuk penerapan nya pasti sudah pada tau bukan

<div class="tbn_css_frame_wrap">
 <div class="tbn_css_frame_wrap_inner bottomshadows">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/LxuVerR2lFU?rel=0&theme=light&hd=1&showinfo=0" frameborder="0" allowfullscreen></iframe>
 </div>
</div>

Coba anda perhatikan  pada bagian https://www.youtube.com/embed/LxuVerR2lFU? silahkan sobat ganti yang berwarna kunimg dengan URL video Youtube yang ingin anda postingkan

3) Tampilan Video Youtube dengan IMage Frame

Untuk Tampilan Video Youtube ini akan lebih menarik lagi ketimbang carai yang pertama ataupun yang kedua,karena tampilan Video Youtube ini Background nya menggunakan Gambar sehingga tampilan nya lebih menarik lagi ketimbang cara satu ataupun yang kedua,untuk tampilan nya bisa anda lihat pada gambar di atas ataupun bisa mengunjungi artikel ini

.tb_outer_wrap {
    width: 100%;
    max-width: 650px;
    margin: 15px auto;
}
.tb_video_wrap_macbook {
    position: relative;
    padding-bottom: 43%;
    padding-top: 0;
    height: 0;
    overflow: hidden;
    -webkit-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46VIj7vERG8D1z6z9RZFZMwebRp0gT8P7bNpZ72RHsWlBcbuefBsR2gtZbHA3TyqGkrsy-QF2ntHq6A-q1jfss0oLQXlTk4Q8I1ES1-VTrlV-7oMdWArNL4cal2f81_YogxOpwpkNDxY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46VIj7vERG8D1z6z9RZFZMwebRp0gT8P7bNpZ72RHsWlBcbuefBsR2gtZbHA3TyqGkrsy-QF2ntHq6A-q1jfss0oLQXlTk4Q8I1ES1-VTrlV-7oMdWArNL4cal2f81_YogxOpwpkNDxY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    -o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46VIj7vERG8D1z6z9RZFZMwebRp0gT8P7bNpZ72RHsWlBcbuefBsR2gtZbHA3TyqGkrsy-QF2ntHq6A-q1jfss0oLQXlTk4Q8I1ES1-VTrlV-7oMdWArNL4cal2f81_YogxOpwpkNDxY/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
    border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEj46VIj7vERG8D1z6z9RZFZMwebRp0gT8P7bNpZ72RHsWlBcbuefBsR2gtZbHA3TyqGkrsy-QF2ntHq6A-q1jfss0oLQXlTk4Q8I1ES1-VTrlV-7oMdWArNL4cal2f81_YogxOpwpkNDxY/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;
}
.tb_video_wrap_macbook iframe, .tb_video_wrap_macbook object, .tb_video_wrap_macbook embed {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: #ddd;
}
@media (max-width: 500px) {
.tb_video_wrap_macbook {
    border-width: 20px 62px 40px 62px;
}
@media all and (max-width: 400px) {
.tb_video_wrap_macbook {
    border: none !important;
}
}

dan untuk penerapan nya,silahkan anda simpan kode HTML berikut di postingan blog sobat

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

Begitupun dengan yang ini,penerapan nya sama dengan cara yang kedua anda perhatikan URL berikut https://www.youtube.com/embed/LxuVerR2lFU? Begitu juga dengan yang ini anda hanya perlu mengganti Url yang berwarna kuning saja ketika memasukan ke postingan nya

adscblog

Recommendation Apps

ads1

Previous

Posting Lebih Baru

Next

Posting Lama

Posted by Dede Ubed, Published at 20 Juni and have 0 komentar