Membuat video responsif adalah tugas yang mudah untuk melakukannya namun seiring dengan itu, menampilkan video tersebut dalam bingkai yang indah sedikit membosankan bagi saya.
Saya akan berbagi dua outline yang berbeda di mana yang pertama adalah outline gambar dari MacBook kosong sehingga tampak seolah-olah video diputar di dalamnya.
outline kedua adalah apa yang saya dirancang dengan CSS murni dan menambahkan beberapa efek bayangan sejuk di bagian bawah menggunakan elemen semu. Saya harap Anda akan menyukainya.
Jadi apa yang akan Anda dapatkan di posting ini?
1) Membuat Tertanam Video Responsif tanpa menambahkan outline.
2) Tampilan Video Di dalam Bingkai Responsif Terbuat dari CSS Murni.
3) Tampilan Video Di dalam Responsif Image Frame dari MacBook Kosong.
Jadi pilihan adalah milik Anda, mereka semua responsif. :)
(Catatan: - Anda tidak memiliki izin untuk menyalin dan berbagi kode saya di blog Anda)
1) Membuat Tertanam Video YouTube atau Vimeo Video Responsif
Ketika Anda mendapatkan kode untuk video anda dari YouTube atau fasilitas situs video lain, kode Anda akan berisi ketinggian tetap dan properti lebar. Jadi ketika seseorang mengunjungi situs Anda dari perangkat resolusi kecil seperti ponsel atau tablet, maka video tertanam tidak akan kembali ukuran sendiri sesuai dengan ukuran layar.
Ini akan selalu berisi tinggi dan lebar untuk nilai-nilai asli meskipun ukuran layar. Sehingga akan baik membuat sebuah bar bergulir pada ukuran layar kecil atau yang lain itu akan cover up bagian video yang meluap (Jika flood: covered up; properti digunakan untuk pembungkus konten). Anda tidak dapat membuat mereka responsif seperti cara yang dapat Anda lakukan dengan gambar.
Jika bergulir bar yang muncul kemudian bahwa halaman tertentu juga akan menunjukkan kesalahan dalam alat website admin akun jika Anda akan memeriksa untuk desain responsif (buruuntuk SEO?).
Saya menulis bahwa semua hanya karena saya ingin memberitahu Anda tentang betapa pentingnya adalah untuk membuat video tertanam responsif.
Jadi bagaimana melakukannya?
Hal ini cukup sederhana untuk dilakukan dengan bantuan CSS. Jadi ikuti langkah-langkah yang diberikan di bawah ini dan responsif. : D
Bagian CS
<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%;
}
</style>
Bagian HTML
<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>
Bagaimana cara menggunakannya?
CSS: - Salin CSS Bagian atas pertama kemudian beralih ke HTML Mode editorial manager posting blogger dan glue kode CSS seluruh karena (akan bekerja untuk WordPress juga).
(Catatan: Anda juga dapat menyisipkan kode CSS di dalam kulit blogger layout Anda sehingga Anda tidak perlu glue kode CSS setiap kali di setiap posting blogger Anda Jika Anda ingin menyisipkan kode di dalam format anda lalu duplicate CSS. kode tanpa tag <style> dan glue tepat sebelum]]> </b: skin> dan simpan layout Anda.
HTML: - Salin kode HTML dan Paste di dalam post manager Anda setelah beralih ke mode HTML. Anda harus menyisipkan HTML di mana Anda ingin video Anda untuk muncul dalam konten Anda. Sekarang untuk menambahkan video Anda, hanya mengganti kode disorot dalam warna kuning dengan kode install Anda mendapat dari video YouTube atau Vimeo Anda.
(Catatan: - Untuk mendapatkan kode install untuk video Anda di YouTube, cukup klik kanan pada pemutar video dan pilih Dapatkan kode insert Anda akan mendapatkan kode Anda di tengah-tengah layar video Anda sehingga salin dari sana..)
Jika Anda mengikuti semua langkah dengan benar maka Anda akan memiliki video Anda yang sepenuhnya responsif. Anda dapat memeriksa langsung oleh re-estimating jendela program Anda dengan mudah.
Sekarang saya akan berbagi dua cara lain bersama dengan live demo untuk menambahkan outline dingin dan expositions menggunakan kode akan sama seperti dijelaskan di atas jadi saya tidak akan menulis ulang lagi (kecuali beberapa perubahan).
2) Tambahkan Sebuah Frame untuk Video Tertanam Menggunakan CSS
Saya suka yang satu ini karena dibuat dengan CSS dan beban secepat seperti yang Anda tahu. :) Ini telah mendapat desain benar-benar keren dan efek bayangan di bagian bawah.
Bagian CS
<style>
.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;
} }
</style>
HTML Bagian untuk itu
<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>
https://www.youtube.com/watch?v=LxuVerR2lFUIni adalah alamat web video intro saya di YouTube saya upload jadi saya telah menyoroti id video yang unik dalam warna kuning. Salin dengan cara yang sama untuk video Anda dan mengganti dalam HTML di atas. Tanya saya dalam komentar jika Anda tidak mendapatkannya.
Untuk video Vimeo, hanya mengganti seluruh kode dimulai dengan <iframe> kode.
Masalah umum - Bayangan tidak muncul seperti yang ditunjukkan dalam demo hidup? Hanya menambahkan kode CSS ini sedikit kulit template Anda atau di dalam posting blog Anda dengan bersama dengan kode CSS diatas diberikan di bawah ini:
.post-body {
position: relative;
z-index: 1;
}
Jadi tidak bekerja untuk Anda? Beritahu saya jika itu bekerja atau tidak. Saya pasti akan membantu Anda. Jadi pindah ke outline gambar.
3) Menampilkan Tertanam Video Di dalam Image Frame Responsif
Ini adalah outline dari MacBook kosong. Saya menggunakan outskirt picture: properti untuk menampilkan outline gambar bukannya menambahkan bingkai gambar dengan foundation picture: properti.
Ini semua karena saya ingin membuat sepenuhnya responsif. Ketika saya menggunakan gambar dengan foundation picture: properti maka saya tidak bisa sepenuhnya responsif.
Video tampaknya tumpang tindih outline antara resolusi layar yang berbeda dan saya tidak suka sama sekali.
Jadi saya memutuskan untuk pergi dengan fringe picture: properti bukan yang membuatnya rapi dan bersih. Anda dapat menggunakan gambar lain tetapi Anda perlu menyesuaikan lebar perbatasan dan gambar perbatasan nilai-nilai yang sesuai.
(Catatan: - Tidak ada dukungan Browser untuk IE10 dan bawah, bekerja dengan baik dengan orang lain program, bahkan dengan versi lama dengan awalan khusus program Aku hanya benci IE.)
CSS Part
<style>
.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/AVvXsEgUdcnO8Tjpm5-gtWodPtpAxgTal1UenPxqDHJ7Nk0a5SV6tES6C9p9uQ05LxMjbljytSrWdMTaw7UePgnF-_OAp1WfTN7aRy0q-Xke8AXm8yRoyy016Jam-v-4FYtsTQ4I-YsBnHpNH8E/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-moz-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUdcnO8Tjpm5-gtWodPtpAxgTal1UenPxqDHJ7Nk0a5SV6tES6C9p9uQ05LxMjbljytSrWdMTaw7UePgnF-_OAp1WfTN7aRy0q-Xke8AXm8yRoyy016Jam-v-4FYtsTQ4I-YsBnHpNH8E/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
-o-border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUdcnO8Tjpm5-gtWodPtpAxgTal1UenPxqDHJ7Nk0a5SV6tES6C9p9uQ05LxMjbljytSrWdMTaw7UePgnF-_OAp1WfTN7aRy0q-Xke8AXm8yRoyy016Jam-v-4FYtsTQ4I-YsBnHpNH8E/s1600/macbook+laptop+frame.png') 50 233 112 228 stretch stretch;
border-image: url('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgUdcnO8Tjpm5-gtWodPtpAxgTal1UenPxqDHJ7Nk0a5SV6tES6C9p9uQ05LxMjbljytSrWdMTaw7UePgnF-_OAp1WfTN7aRy0q-Xke8AXm8yRoyy016Jam-v-4FYtsTQ4I-YsBnHpNH8E/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;
}
}
</style>
HTML Part
<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&theme=dark&controls=1&showinfo=0&autohide=0" frameborder="0" allowfullscreen=""></iframe>
</div>
</div>
Mengganti bagian yang disorot dengan ID video untuk YouTube dan video Vimeo, hanya mengganti penuh <iframe> kode.
Jadi ini adalah untuk sekarang dan saya harap kalian menyukainya. Tolong beritahu saya umpan balik Anda melalui komentar apakah Anda menyukainya atau tidak.
Jika Anda menghadapi masalah apapun atau saya tidak bisa membuat hal-hal yang jelas maka silakan beritahu saya. Saya akan mencoba yang terbaik untuk membantu Anda keluar.
Anda dapat membantu saya juga dengan berbagi posting ini atau menghubungkan dengan saya di jejaring sosial. : D
Terimakasih!..
