// Tentang Konten Bagian di sini // Konten Bagian Latar Belakang Kecil di sini

Saya menggunakan font Font Awesome untuk ikon sosial, yang terletak di bagian bagian-latar belakang kecil... Kemudian kami akan menambahkan template untuk video kami menggunakan plugin jQuery.mb.YTPlayer. Tempatkan kode berikut tepat setelah .

Inilah yang kami gunakan untuk menyesuaikan video:

• kelas pemain- kelas ini digunakan oleh plugin mb.YTPlayer
• videoURL- tautan ke video
• penahanan- Pemilih CSS untuk memutar video
• putar otomatis- putar otomatis video
• bisu- kehadiran suara
• dimulai dari- waktu mulai memutar video
• kegelapan- transparansi video

CSS

Mari tambahkan gaya ke situs kita. Pertama-tama, mari kita tentukan tampilan html, isi, tag paragraf, dan daftar berpoin.

Html (tinggi: 100%) body (font: 15px / 23px "Raleway", sans-serif; margin: 0; padding: 0; tinggi: 100%; lebar: 100%; -webkit-font-smoothing: antialiased; - webkit-text-size-adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (tampilan: inline-block; list-style: none; padding-right : 10px ;)

Wrapper (z-index: 600; position: relative) .pattern (background-image: url (../ images / pattern.png); background-repeat: repeat; background-attachment: scroll; width: 100%; height: 100%; position: absolute; top: 0; left: 0) .divider (background-image: url (../ images / divider.png); display: block; width: 300px; height: 35px; margin: 10px auto ) #colorize (warna: # f1c40f; font-family: "Lato", sans-serif; ukuran font: 40px)

Saatnya untuk menata bagian latar belakang besar. Install indeks-z pada 550 dan parameter meluap untuk disembunyikan. Ini untuk mencegah konten YouTube (subtitel, anotasi) ditampilkan di situs web kami. Sisa gaya diperlukan untuk header, tombol, dan gambar default (lebih lanjut tentang itu nanti).

Big-background (z-index: 550; text-align: center; height: 100%; min-height: 100%; position: relative; overflow: hidden) .big-background .big-background-container (width: 830px ; max-width: 100%; tampilan: inline-block; posisi: absolut; atas: 50%; kiri: 50%; -webkit-transform: translate (-50%, - 50%); -moz-transform: translate (-50%, - 50%); -ms-transform: terjemahkan (-50%, - 50%); -o-transform: terjemahkan (-50%, - 50%); ubah: terjemahkan (-50%, -50%)) .big-background-title (font-family: "Raleway", sans-serif; font-size: 78px; color: #fff; font-weight: 300; text-transform: uppercase; text-align : center; margin-bottom: 22px; padding-top: 20px; tampilan: inline-block; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) a.big-background-btn ( font-family: "Lato", sans-serif; font-size: 13px; text-transform: uppercase; text-decoration: none; color: #fff; background: transparent; border: 2px solid #fff; padding: 10px 14px ; kursor: penunjuk; spasi huruf: 2px; perataan teks: tengah; tampilan: blok sebaris; -webkit-transisi: kemudahan latar belakang .4s; -moz-transisi: kemudahan latar belakang .4s; -o-transisi: kemudahan latar belakang .4s; transisi: kemudahan latar belakang .4s; ) .big-background-btn: hover (color: #fff; background: rgba (255,255,255,0.20)) .big-background-default-image (background: url (../ images / sunset.jpg); background-repeat : no-repeat; background-position: center center; background-size: cover; width: 100%; height: 100%; z-index: 0; backface-visibility: hidden)

Sekarang mari kita beralih ke bagian tentang-bagian... Mari kita konfigurasikan parameternya warna latar belakang menjadi putih dan lapisan 60px atas dan bawah dan 20px kiri dan kanan.

Tentang-bagian (font-family: "Lato", sans-serif; warna: # 7f8c8d; background: #fff; padding: 60px 20px) .about-section-container (text-align: center; padding-bottom: 50px) .about-section-title (font-family: "Raleway", sans-serif; font-size: 40px; background: #fff; color: # 3d566e; padding: 0 35px; margin-bottom: 22px; background-attachment: scroll; background-repeat: repeat-x; background-position: center center; text-transform: uppercase) a.about-section-btn (font-family: "Lato", sans-serif; ukuran font: 13px; teks -transform: huruf besar; dekorasi teks: tidak ada; warna: #34495e; latar belakang: transparan; batas: 2px solid # 34495e; bantalan: 10px 14px; kursor: penunjuk; spasi huruf: 2px; perataan teks: tengah; tampilan: inline-block; -webkit-transisi: kemudahan latar belakang .4; -transisi-moz: kemudahan latar belakang .4; -o-transisi: kemudahan latar belakang .4; transisi: kemudahan latar belakang .4;) .about-section-btn: hover (warna: #fff; latar belakang: #34495e;)

Untuk bagian latar belakang kecil, yang juga berfungsi sebagai footer, kami akan menetapkan lebar 100% dan parameter meluap untuk disembunyikan. Kami juga akan menambahkan beberapa lapisan atas dan bawah agar video kami dapat dilihat. Terakhir, mari tambahkan gaya untuk tombol media sosial.

Small-background-section (font-family: "Raleway", sans-serif; padding: 100px 0; position: relative; width: 100%; overflow: hidden) .small-background-container (position: relative; text-align : tengah) .small-background-title (ukuran font: 40px; warna: # f1c40f; font-weight: 300; z-index: 10; display: inline-block; text-transform: uppercase; margin-bottom: 20px ; margin-top: 20px; position: relative; background-attachment: scroll; background-repeat: repeat-x; background-position: top center) .socials a (color: #fff) .socials a: hover (color: # bdc3c7)

Pertanyaan media

Untuk membuat situs kita responsif, mari tambahkan beberapa kueri media.

@media screen dan (max-width: 768px) (.about-section-title (line-height: 1)) @media screen dan (max-width: 480px) (.big-background-title (font-size: 58px) ) .small-background-title (line-height: 1) / *.player (display: none;) -> Jika Anda ingin menghapus video bg pada viewport tertentu w / o plugin * /) layar @media dan ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) layar @media dan (max-width: 320px) (.small-background-title (ukuran font: 30px))

jQuery

Sekarang mari kita nyalakan video YouTube kita. Ayo panggil kelasnya pemain di dalam kode jQuery. Tempatkan kode berikut sebelum tag body penutup dan di dalam tag .
$(fungsi() ($(".player").mb_YTPlayer();));

Opsi mundur

Video latar belakang dari YouTube tidak akan diputar di perangkat seluler atau tablet karena kebijakan YouTube tidak mengizinkannya.

Namun, kita dapat menggunakan jQuery untuk menambahkan gambar latar belakang default jika browser mendeteksi bahwa pengguna telah memasuki situs dari perangkat seluler.

Solusi manual

Untuk menentukan bahwa pengguna masuk dari perangkat seluler atau tablet, kami dapat menyembunyikan elemen pada ukuran layar tertentu. Misalnya, kami ingin menghapus latar belakang video pada layar lebar 480px. Anda hanya perlu menambahkan display: none ke elemen player:

@media screen dan (max-width: 480px) (.player (display: none;))

Sejauh menyangkut jQuery, di sini kita akan mengatur variabel is_mobile dengan parameter salah. Kemudian, pastikan kelasnya pemain memiliki tampilan: tidak ada parameter. Jika demikian, maka tambahkan kelasnya besar-latar belakang-default-gambar ke bagian latar belakang besar dan bagian-latar belakang kecil untuk menggunakan gambar latar belakang default. Jika tidak, tidak ada yang akan berubah.

(fungsi ($) ($ (dokumen) .ready (fungsi () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Skrip bersyarat di sini $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". pemain "). mb_YTPlayer();)));)) (jQuery);

Solusi dengan plugin jQuery

Cara lain untuk mengatur gambar default adalah dengan plugin jQuery perangkat.js(http://matthewhudson.me/projects/device.js/). Ini akan menyederhanakan proses penggambaran kondisi untuk berbagai ukuran layar perangkat seluler. Dengan menggunakan plugin ini, kita cukup menulis kode berikut:

(fungsi ($) ($ (dokumen) .ready (fungsi () (//Device.js akan memeriksa apakah itu Tablet atau Seluler - http://matthewhudson.me/projects/device.js/ if (! device. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery akan menambahkan latar belakang default ke kelas pilihan $ (". big-background, .small- background-section "). addClass(" big-background-default-image ");)));)) (jQuery);

Di sini saya telah menggunakan metode perangkat.mobile() dan perangkat.tablet () untuk memeriksa perangkat dari mana pengguna masuk. Jika kondisi terpenuhi bahwa kelas ditambahkan besar-latar belakang-default-gambar ke bagian latar belakang besar dan bagian-latar belakang kecil... Jika tidak, kelas pemain akan tetap tidak berubah dan video akan diputar.

Kami mengatur

Video adalah cara yang bagus untuk menyampaikan pesan Anda kepada audiens Anda. Ini bisa menjadi alat yang ampuh untuk situs Anda jika digunakan dengan benar.

Saya yakin seiring dengan perkembangan dan peningkatan desain web, akan semakin banyak ide kreatif untuk menggunakan video dalam desain situs web. Saya harap Anda belajar satu atau dua hal dalam tutorial ini. Tulis pendapat dan komentar Anda di komentar.

Dari seorang penerjemah. Dengan semua keinginan dan komentar mengenai terjemahan, silakan hubungi saya secara pribadi. Terima kasih!

Bagaimana cara menginstal situs di monitor desktop?

Mungkin hal pertama yang membuat pengguna bosan adalah melihat wallpaper yang terpasang di Desktop. Banyak orang terus-menerus melihat gambar default selama bertahun-tahun, bahkan jika sistem telah diinstal ulang lebih dari sekali. Semua pengguna cepat bosan dengan itu, dan mereka mencari gambar yang cocok untuk Desktop. Beberapa pengguna lebih suka wallpaper animasi. Saya sarankan Anda mengatur halaman beranda situs favorit Anda sebagai wallpaper (namun, halaman apa pun, tentu saja). Sekarang, di zaman Internet tanpa batas, ini terkadang sangat, sangat nyaman bagi sebagian orang, terutama ketika komputer atau laptop selalu terhubung ke jaringan. Bagaimanapun, ini adalah pilihan yang bagus. Trik ini muncul di Windows XP. Sayangnya, itu berakhir di sana. Tabel interaktif hilang. Secara pribadi, sangat menarik bagi saya untuk menonton pembaruan situs berita online. Pengaturan desktop seperti itu akan berguna bagi banyak pengguna. Tetapi, sekali lagi, pembuat versi baru Windows memutuskan untuk meninggalkan Desktop tanpa kemampuan untuk menampilkan halaman interaktif. Jujur, sangat, sangat menyesal. Secara pribadi, saya terkadang sangat merindukan kesempatan seperti itu.

Tapi mari kita beralih dari kata-kata ke perbuatan. Memasang halaman web di Desktop

• Klik kanan pada salah satu ruang kosong di Desktop

• Pada menu tambahan yang muncul di Desktop, pilih item Properti.

• Mari kita pilih tab Desktop dan klik Kustomisasi desktop...

• Di menu Elemen Desktop, sekarang pilih tab Web lalu klik tombol Membuat... Yah, atau pilih item Halaman rumah saya saat ini. Latar belakang akan menampilkan halaman situs, yang ditetapkan sebagai halaman beranda di browser default.

Di jendela yang muncul, cukup masukkan alamat situs favorit Anda yang sebelumnya disalin dari bilah alamat browser Anda.

Tutup kotak dialog yang terbuka secara berurutan, setujui perubahan dan klik OK. Sekarang, alih-alih gambar yang membosankan, Anda memiliki halaman situs web yang Anda sukai dan, melihat situs di Desktop, Anda dapat melihat perubahan di jaringan dalam mode interaktif.