// Sektsiooni sisu kohta siin // Väikese taustjaotuse sisu siin

Sektsioonis asuvate sotsiaalsete ikoonide jaoks kasutasin fonti Font Awesome väikese taustaga sektsioon... Seejärel lisame pistikprogrammi abil oma videole malli jQuery.mb.YTPlayer. Kohe pärast sisestage järgmine kood .

Video kohandamiseks kasutasime järgmist.

• klass mängija- seda klassi kasutab pistikprogramm mb.YTPlayer
• videoURL- link videole
• ohjeldamine- CSS-i valija, milles videot esitada
• automaatesitus- video automaatesitus
• vaigistama- heli olemasolu
• startAt- kellaaeg, millest alates video esitamist alustada
• läbipaistmatus- video läbipaistvus

CSS

Lisame oma saidile stiile. Kõigepealt määratleme html-i, sisu, lõigumärgendite ja täpploendi välimuse.

Html (kõrgus: 100%) keha (font: 15px / 23px "Raleway", ilma serifita; veeris: 0; polsterdus: 0; kõrgus: 100%; laius: 100%; -webkit-font-smoothing: antialiased; - webkit-text-size-adjust: 100%) p (fondi suurus: 20 pikslit; rea kõrgus: 140%; teksti joondus: keskel) ul li (kuva: inline-block; loendi stiil: puudub; polsterdus-parem : 10 pikslit ;)

Mähis (z-indeks: 600; asend: suhteline) .muster (taustapilt: url (../ images / pattern.png); taustakordus: kordamine; taustamanus: kerimine; laius: 100%; kõrgus: 100%; asukoht: absoluutne; ülemine: 0; vasak: 0) .jagaja (taustapilt: url (../ images / divider.png); ekraan: plokk; laius: 300px; kõrgus: 35px; veeris: 10px automaatne ) #värvima (värv: # f1c40f; fondiperekond: "Lato", sans-serif; fondi suurus: 40 pikslit)

On aeg kujundada suure taustaga jaotis. Installige z-indeks peal 550 ja parameeter ülevool varjata. Selle eesmärk on takistada YouTube'i sisu (subtiitrite, märkuste) kuvamist meie veebisaidil. Ülejäänud stiilid on päiste, nuppude ja vaikepildi jaoks (sellest lähemalt hiljem).

Suur taust (z-indeks: 550; teksti joondus: keskel; kõrgus: 100%; min-kõrgus: 100%; asend: suhteline; ülevool: peidetud) .suur taust .suure taustaga konteiner (laius: 830 pikslit ; maksimaalne laius: 100%; ekraan: tekstisisene plokk; asukoht: absoluutne; ülemine: 50%; vasak: 50%; -webkit-transform: tõlkida (-50%, - 50%); -moz-transform: tõlkida (-50%, - 50%); -ms-teisendus: tõlkida (-50%, - 50%); -o-teisendus: tõlkida (-50%, -50%); teisendus: tõlkida (-50%) -50%)) .big-background-title (fondiperekond: "Raleway", sans-serif; fondi suurus: 78 pikslit; värv: #fff; fondi kaal: 300; teksti teisendus: suurtähed; teksti joondus : keskel; veeris-alumine: 22px; polster-ülaosa: 20px; ekraan: inline-block; taustamanus: kerimine; taustakordus: kordamine-x; tausta asukoht: ülemine keskel) a.big-background-btn ( fondiperekond: "Lato", sans-serif; fondi suurus: 13 pikslit; teksti teisendus: suurtähed; teksti kaunistus: puudub; värv: #fff; taust: läbipaistev; ääris: 2px ühtlane #fff; polsterdus: 10px 14px ; kursor: kursor; tähevahed: 2 pikslit; teksti joondamine: keskel; ekraan: inline-block; -veebikomplekti üleminek: .4s tausta lihtsus; -moz-transition: .4s tausta lihtsus; -o-üleminek: .4s tausta lihtsus; üleminek: .4s tausta lihtsus; ) .big-background-btn: hõljumine (värv: #fff; taust: rgba (255,255,255,0,20)) .big-background-default-image (taust: url (../ images / sunset.jpg); background-repeat : ei kordu; tausta asend: keskel; tausta suurus: kaas; laius: 100%; kõrgus: 100%; z-indeks: 0; tagakülje nähtavus: peidetud)

Liigume nüüd jaotise juurde umbes-jaotis... Seadistame parameetri taustavärv valgeks ja polsterdus 60 pikslit ülevalt ja all ning 20 pikslit vasakul ja paremal.

Teave-jaotis (fondiperekond: "Lato", ilma serifita; värv: # 7f8c8d; taust: #fff; polster: 60 pikslit 20 pikslit) .about-section-container (teksti joondamine: keskel; polsterdus-alumine: 50 pikslit) .about-section-title (fondiperekond: "Raleway", sans-serif; fondi suurus: 40 pikslit; taust: #fff; värv: # 3d566e; polsterdus: 0 35 pikslit; veeris-alumine: 22 pikslit; taustamanus: kerige; taustakordus: kordus-x; tausta asukoht: keskel keskel; teksti teisendus: suurtähed) a.about-section-btn (fondiperekond: "Lato", sans-serif; fondi suurus: 13 pikslit; tekst -teisendus: suurtähed; tekstidekoratsioon: puudub; värv: # 34495e; taust: läbipaistev; ääris: 2px ühetaoline # 34495e; polsterdus: 10px 14px; kursor: kursor; tähevahe: 2px; teksti joondamine: keskel; ekraan: inline-block; -webkit-transition: .4s lihtsus taustal; -moz-transition: .4s lihtsus taustal; -o-üleminek: .4s lihtsus taustal; üleminek: .4s lihtsus taustal;) .about-section-btn: hõljutus (värv: #fff; taust: # 34495e;)

Väikese taustaga sektsiooni jaoks, mis toimib ka jalusena, määrame laiuse 100% ja parameetri ülevool varjata. Lisame ka mõned polsterdusülevalt ja alt, et meie video oleks nähtav. Lõpuks lisame sotsiaalmeedia nuppude stiilid.

Väikese taustaga jaotis (fondiperekond: "Raleway", ilma serifita; polsterdus: 100 pikslit 0; asukoht: suhteline; laius: 100%; ületäitmine: peidetud) .small-background-container (asend: suhteline; teksti joondus : keskel) .small-background-title (fondi suurus: 40 pikslit; värv: # f1c40f; fondi kaal: 300; z-indeks: 10; ekraan: inline-block; teksti teisendus: suurtähed; veeris-alumine: 20 pikslit ; ülemine veeris: 20 pikslit; asend: suhteline; taustmanus: kerimine; tausta kordus: kordus-x; tausta asukoht: ülemine keskel) .socials a (värv: #fff) .socials a: hõljutamine (värv: #) bdc3c7)

Meedia päringud

Meie saidi tundlikuks muutmiseks lisame mõned meediapäringud.

@meediumiekraan ja (maksimaalne laius: 768 pikslit) (.about-section-title (reakõrgus: 1)) @meediaekraan ja (maksimaalne laius: 480px) (.big-background-title (fondi suurus: 58px) ) .small-background-title (reakõrgus: 1) / *. pleier (kuva: puudub;) -> Kui soovite eemaldada videobg konkreetsest vaateaknast ilma pistikprogrammita * /) @meediumiekraan ja ( max-width: 360px) (.big-background-title, # colorize (reakõrgus: 1)) @meediaekraan ja (maksimaalne laius: 320px) (.small-background-title (fondi suurus: 30px))

jQuery

Nüüd lülitame sisse oma YouTube'i video. Helistame klassi mängija jQuery koodi sees. Asetage järgmine kood sulgeva sisumärgendi ette ja siltide sisse .
$ (funktsioon () ($ (. player"). mb_YTPlayer ();));

Varuvõimalus

YouTube'i taustavideoid ei esitata mobiilseadmetes ega tahvelarvutites, kuna YouTube'i eeskirjad seda ei luba.

Siiski saame kasutada jQueryt vaiketaustapildi lisamiseks juhuks, kui brauser tuvastab, et kasutaja on saidile sisenenud mobiilseadmest.

Manuaalne lahendus

Et teha kindlaks, kas kasutaja on mobiilseadmest või tahvelarvutist sisse logitud, saame elemendi peita kindlas ekraanisuuruses. Näiteks tahame eemaldada video tausta 480 piksli laiekraanidelt. Peate lihtsalt pleieri elemendile lisama display: none:

@meediumiekraan ja (maksimaalne laius: 480 pikslit) (.player (ekraan: puudub;))

Mis puutub jQuerysse, siis siin määrame muutuja is_mobile parameetriga false. Seejärel veenduge, et klass mängija on ekraan: parameetreid pole. Kui jah, siis lisa klass suure taustaga vaikepilt sektsioonidesse suure taustaga ja väikese taustaga sektsioon vaiketaustapildi kasutamiseks. Muidu ei muutu midagi.

(funktsioon ($) ($ (dokument) .ready (funktsioon () (var is_mobile = false; if ($ (. player").) css ("kuva") == "puudub") (on_mobile = tõene;) if (is_mobile == true) (// Tingimusskript siin $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (). mängija "). mb_YTPlayer ();)));)) (jQuery);

Lahendus jQuery pistikprogrammiga

Teine võimalus vaikekujutise määramiseks on jQuery pistikprogramm device.js(http://matthewhudson.me/projects/device.js/). See lihtsustab mobiilseadmete erinevate ekraanisuuruste tingimuste kirjeldamise protsessi. Seda pistikprogrammi kasutades saame lihtsalt kirjutada järgmise koodi:

(funktsioon ($) ($ (dokument) .ready (funktsioon ()) (//Device.js kontrollib, kas tegemist on tahvelarvuti või mobiiliga – http://matthewhudson.me/projects/device.js/ kui (! seade. tahvelarvuti () &&! device.mobile ()) ($ (. player"). mb_YTPlayer ();) else (// jQuery lisab eelistatud klassile $ vaiketausta (". big-background, .small- background-section "). addClass (" suure taustaga - vaikepilt ");)));)) (jQuery);

Siin olen kasutanud meetodeid seade.mobiil () ja seade.tahvelarvuti () et kontrollida seadet, millest kasutaja on sisse logitud. Kui tingimus on täidetud, lisatakse klass suure taustaga vaikepilt sektsiooni juurde suure taustaga ja väikese taustaga sektsioon... Muidu klass mängija jääb muutumatuks ja videot esitatakse.

Tegime korda

Videod on suurepärane viis oma sõnumi publikule edastamiseks. Õige kasutamise korral võib see olla teie saidi jaoks võimas tööriist.

Olen kindel, et veebidisaini arenedes ja täiustudes tekib aina rohkem loomingulisi ideid video kasutamiseks veebilehe kujunduses. Loodan, et õppisite sellest õpetusest midagi või paar. Kirjutage oma mõtted ja kommentaarid kommentaaridesse.

Tõlkijalt. Kõigi tõlkega seotud soovide ja kommentaaridega võtke minuga ühendust isiklikult. Aitäh!

Kuidas seadistada saiti lauaarvuti monitoril?

Tõenäoliselt esimene asi, millest iga kasutaja tüdineb, on töölauale installitud taustapildi vaatamine. Paljud inimesed vaatavad aastaid pidevalt vaikepilti, isegi kui süsteemi on mitu korda uuesti installitud. Kõik kasutajad tüdinevad sellest kiiresti ja nad otsivad töölauale sobivaid pilte. Mõned kasutajad eelistavad animeeritud taustapilte. Soovitan teil taustapildiks seada oma lemmiksaidi avaleht (muidugi mis tahes leht). Nüüd, piiramatu Interneti ajal, on see mõnikord mõne jaoks väga-väga mugav, eriti kui arvuti või sülearvuti on pidevalt võrku ühendatud. Igal juhul pole see halb variant. See trikk ilmus Windows XP-s. Paraku see lõppes sellega. Interaktiivsed tabelid on kadunud. Mulle isiklikult oli väga huvitav jälgida uudistesaitide värskendusi võrgus. Selline töölaua seadistus oleks kasulik paljudele kasutajatele. Kuid jällegi otsustasid Windowsi uute versioonide loojad jätta töölaua ilma interaktiivse lehe kajastamise võimaluseta. Ausalt, väga-väga kahju. Mina isiklikult jätan sellisest võimalusest mõnikord väga mööda.

Liigume aga sõnadelt tegudele. Veebilehe installimine töölauale

• Paremklõpsake töölaual mis tahes vabal alal

• Valige töölauale ilmuvas lisamenüüs üksus Omadused.

• Valime vahekaardi Töölaud ja klõpsake nuppu Töölaua kohandamine ...

• Nüüd valige menüüst Töölaua elemendid vahekaart võrk ja seejärel klõpsake nuppu Loo... Noh, või valige üksus Minu praegune koduleht. Taustal kuvatakse saidi leht, mis on vaikebrauseris määratud avaleheks.

Ilmuvas aknas sisestage lihtsalt oma lemmiksaidi varem kopeeritud aadress brauseri aadressiribalt.

Sulgege järjestikku avatud dialoogiboksid, nõustuge muudatustega ja klõpsake nuppu OK. Nüüd on teil igava pildi asemel meelepärase veebisaidi leht ja töölaualt saiti vaadates saate interaktiivses režiimis jälgida võrgus toimuvaid muudatusi.