// O obsahu sekcie tu // Malý obsah sekcie na pozadí tu

Na sociálne ikony, ktoré sa nachádzajú v sekcii, som použil font Font Awesome sekcia s malým pozadím... Potom pomocou doplnku pridáme šablónu pre naše video jQuery.mb.YTPlayer. Nasledujúci kód umiestnite hneď za .

Na prispôsobenie videa sme použili toto:

• trieda hráč- túto triedu používa doplnok mb.YTPlayer
• videoURL- odkaz na video
• zadržiavanie- Selektor CSS, v ktorom sa má prehrávať video
• automatické prehrávanie- automatické prehrávanie videa
• nemý- prítomnosť zvuku
• štart- čas, od ktorého sa má začať prehrávanie videa
• nepriehľadnosť- transparentnosť videa

CSS

Pridajme štýly na naše stránky. Najprv definujme vzhľad značiek html, body, odsekov a zoznamu s odrážkami.

Html (výška: 100%) telo (písmo: 15 pixelov / 23 pixelov „Raleway“, bez pätky; okraj: 0; výplň: 0; výška: 100%; šírka: 100%; -webkit-vyhladzovanie písma: vyhladené;- webkit-text-size-adjust: 100%) p (font-size: 20px; line-height: 140%; text-align: center) ul li (display: inline-block; list-style: none; padding-right : 10 pixelov;)

Obálka (z-index: 600; poloha: relatívna). Vzor (obrázok na pozadí: adresa URL (../ images / pattern.png); opakovanie pozadia: opakovanie; pripojenie k pozadiu: posúvanie; šírka: 100%; výška: 100%; poloha: absolútna; hore: 0; vľavo: 0). Delič (obrázok na pozadí: adresa URL (../ images / divider.png); zobrazenie: blok; šírka: 300 pixelov; výška: 35 pixelov; okraj: 10 pixelov auto ) #colorize (color: # f1c40f; font-family: "Lato", sans-serif; font-size: 40px)

Je načase upraviť sekciu s veľkým pozadím. Inštalácia z-index na 550 a parametrom pretekať skryť. Toto má zabrániť zobrazovaniu obsahu YouTube (titulkov, anotácií) na našich webových stránkach. Ostatné štýly sú potrebné pre hlavičky, tlačidlá a predvolený obrázok (o tom neskôr).

Veľké pozadie (index z: 550; zarovnanie textu: stred; výška: 100%; minimálna výška: 100%; poloha: relatívna; pretečenie: skryté). Veľké pozadie. Veľké kontajner na pozadie (šírka: 830 pixelov) ; max-width: 100%; display: inline-block; position: absolute; top: 50%; left: 50%; -webkit-transform: translate (-50%,-50%); -moz-transform: translate (-50%,-50%); -ms-transform: translate (-50%,-50%); -o-transform: translate (-50%,-50%); transformácia: translate (-50%, -50%)). Veľký názov pozadia (rodina fontov: "Raleway", bezpatkové; veľkosť písma: 78 pixelov; farba: #fff; hmotnosť písma: 300; transformácia textu: veľké písmená; zarovnanie textu : stred; dolný okraj: 22 pixelov; horný okraj: 20 pixelov; displej: vložený blok; príloha na pozadí: posúvanie; opakovanie pozadia: opakovanie-x; poloha pozadia: horný stred) a.veľké pozadie-btn ( rodina písem: "Lato", bez pätky; veľkosť písma: 13 pixelov; transformácia textu: veľké písmená; dekorácia textu: žiadna; farba: #fff; pozadie: priehľadné; orámovanie: 2 pixely plné #fff; výplň: 10 pixelov 14 pixelov ; kurzor: ukazovateľ; medzery medzi písmenami: 2 pixely; zarovnanie textu: stred; displej: radový blok; -webkit-transition: .4s jednoduchosť pozadia; -moz-prechod: .4s jednoduchosť pozadia; -o-prechod: jednoduchosť pozadia 0,4 s; prechod: jednoduchosť pozadia 0,4 s; ) .big-background-btn: hover (farba: #fff; pozadie: rgba (255,255,255,0,20)) .big-background-default-image (pozadie: url (../ images / sunset.jpg); pozadie-opakovanie : žiadne opakovanie; poloha na pozadí: stred stredu; veľkosť pozadia: kryt; šírka: 100%; výška: 100%; index z: 0; viditeľnosť na zadnej strane: skrytá)

Teraz prejdeme k sekcii o sekcii... Konfigurujme parameter farba pozadia na biele a vypchávka 60 pixlov hore a dole a 20 pixelov vľavo a vpravo.

O sekcii (rodina fontov: „Lato“, bez pätky; farba: # 7f8c8d; pozadie: #fff; výplň: 60 pixelov na 20 pixlov). Kontajner na sekciu (zarovnanie textu: stred; výplň dole: 50 pixelov) .obout-section-title (rodina písma: "Raleway", bezpatkové; veľkosť písma: 40 pixelov; pozadie: #fff; farba: # 3d566e; výplň: 0 35 pixelov; spodný okraj: 22 pixelov; príloha na pozadí: posúvať; opakovanie na pozadí: opakovanie-x; poloha pozadia: stred stredu; transformácia textu: veľké písmená) a.about-section-btn (rodina fontov: "Lato", bezpatkové; veľkosť písma: 13 pixelov; text -transformácia: veľké písmená; textová dekorácia: žiadna; farba: # 34495e; pozadie: priehľadné; orámovanie: 2 pixely plné # 34495e; výplň: 10 pixelov 14px; kurzor: ukazovateľ; medzery medzi písmenami: 2 pixely; zarovnanie textu: stred; zobrazenie: vložený blok; -webkit-prechod: .4s jednoduchosť pozadia; -moz-prechod: .4s jednoduchosť pozadia; -o-prechod: .4s jednoduchosť pozadia; prechod: .4s jednoduchosť pozadia;) .about-section-btn: hover (farba: #fff; pozadie: # 34495e;)

Pre sekciu small-background-sekcia, ktorá slúži aj ako päta, priradíme šírku 100% a parameter pretekať skryť. Tiež nejaké pridáme vypchávka hore a dole, aby bolo možné vidieť naše video. Nakoniec pridáme štýly pre tlačidlá sociálnych médií.

Sekcia s malým pozadím (rodina písem: „Raleway“, bez pätky; výplň: 100 pixelov 0; poloha: relatívna; šírka: 100%; pretečenie: skryté). Kontajner s malým pozadím (poloha: relatívna; zarovnanie textu) : stred). malý názov pozadia (veľkosť písma: 40 pixelov; farba: # f1c40f; hmotnosť písma: 300; index z: 10; zobrazenie: vložený blok; transformácia textu: veľké písmená; spodný okraj: 20 pixelov ; horný okraj: 20 pixelov; poloha: relatívna; príloha k pozadiu: posúvanie; opakovanie pozadia: opakovanie-x; poloha pozadia: horný stred). spoločenské a (farba: #fff). spoločenské a: vznášanie (farba: # bdc3c7)

Mediálne otázky

Aby bola naša stránka responzívna, pridajte niekoľko mediálnych dotazov.

@media screen and (max-width: 768px) (.about-section-title (line-height: 1)) @media screen and (max-width: 480px) (.big-background-title (font-size: 58px) ). small-background-title (line-height: 1) / *. player (display: none;)-> If you want to remove the video bg on a specific viewport w / o plugin * /) @media screen and ( max-width: 360px) (.big-background-title, # colorize (line-height: 1)) @media screen and (max-width: 320px) (.small-background-title (font-size: 30px))

jQuery

Teraz zapnime naše video na YouTube. Zavolajme triedu hráč vnútri kódu jQuery. Nasledujúci kód umiestnite pred koncovú značku tela a do značiek .
$ (function () ($ (". player"). mb_YTPlayer ();));

Záložná možnosť

Videá na pozadí zo služby YouTube sa nebudú prehrávať na mobilných zariadeniach alebo tabletoch, pretože to pravidlá služby YouTube nepovoľujú.

Môžeme však použiť jQuery na pridanie predvoleného obrázku na pozadí v prípade, že prehliadač zistí, že užívateľ vstúpil na stránku z mobilného zariadenia.

Manuálne riešenie

Aby sme zistili, že je používateľ prihlásený z mobilného zariadenia alebo tabletu, môžeme prvok skryť na konkrétnej veľkosti obrazovky. Napríklad chceme odstrániť pozadie videa na 480px širokouhlých obrazovkách. Do prvku prehrávača stačí pridať display: none:

@mediálna obrazovka a (maximálna šírka: 480 pixelov) (. prehrávač (zobrazenie: žiadny;))

Pokiaľ ide o jQuery, tu nastavíme premennú je_mobilny s parametrom false. Potom sa uistite, že trieda hráč má zobrazenie: žiadne parametre. Ak je to tak, pridajte triedu big-background-default-image do sekcií veľké pozadie a sekcia s malým pozadím použiť predvolený obrázok na pozadí. V opačnom prípade sa nič nezmení.

(funkcia ($) ($ (dokument) .ready (funkcia () (var is_mobile = false; if ($ (". player"). css ("display") == "none") (is_mobile = true;) if (is_mobile == true) (// Podmienený skript tu $ (". big-background, .small-background-section"). addClass ("big-background-default-image");) else ($ (". prehrávač "). mb_YTPlayer ();)));)) (jQuery);

Riešenie pomocou doplnku jQuery

Ďalším spôsobom, ako nastaviť predvolený obrázok, je doplnok jQuery device.js(http://matthewhudson.me/projects/device.js/). To zjednoduší proces popisu podmienok pre rôzne veľkosti obrazovky mobilných zariadení. Pomocou tohto doplnku môžeme jednoducho napísať nasledujúci kód:

(funkcia ($) ($ (dokument) .ready (funkcia () (//Device.js skontroluje, či ide o tablet alebo mobil - http://matthewhudson.me/projects/device.js/ if (! zariadenie. tablet () &&! device.mobile ()) ($ (". player"). mb_YTPlayer ();) else (// jQuery pridá predvolené pozadie do preferovanej triedy $ (". big-background, .small- sekcia pozadia "). addClass (" big-background-default-image ");)));)) (jQuery);

Tu som použil metódy device.mobile () a device.tablet () skontrolovať zariadenie, z ktorého je používateľ prihlásený. Ak je splnená podmienka, trieda sa pridá big-background-default-image do sekcie veľké pozadie a sekcia s malým pozadím... Inak trieda hráč zostane nezmenené a video sa prehrá.

Dali sme do poriadku

Videá sú úžasný spôsob, ako dostať vašu správu k publiku. Ak je váš web používaný správne, môže to byť účinný nástroj.

Som si istý, že ako sa webdesign vyvíja a zdokonaľuje, bude existovať stále viac kreatívnych nápadov na používanie videa v dizajne webových stránok. Dúfam, že ste sa v tomto návode niečo naučili. Napíšte svoje nápady a pripomienky do komentárov.

Od prekladateľa. V prípade akýchkoľvek želaní a pripomienok k prekladu ma prosím kontaktujte osobne. Vďaka!

Ako nainštalovať webovú stránku na stolný monitor?

Pravdepodobne prvá vec, ktorá každého používateľa unaví, je pozrieť sa na tapetu, ktorá je nainštalovaná na ploche. Mnoho ľudí sa neustále pozerá na predvolený obrázok roky, aj keď bol systém preinštalovaný viac ako raz. Všetci používatelia sa s tým rýchlo nudia a hľadajú vhodné obrázky na plochu. Niektorí používatelia uprednostňujú animované tapety. Navrhujem, aby ste domovskú stránku svojho obľúbeného webu nastavili ako tapetu (samozrejme, akúkoľvek stránku). Teraz, v časoch neobmedzeného internetu, je to niekedy pre niektorých veľmi, veľmi výhodné, najmä keď je počítač alebo prenosný počítač neustále pripojený k sieti. V každom prípade to nie je zlá voľba. Tento trik sa objavil v systéme Windows XP. Bohužiaľ, tam to skončilo. Interaktívne tabuľky sú preč. Osobne bolo pre mňa veľmi zaujímavé sledovať aktualizácie spravodajských serverov online. Takéto nastavenie pracovnej plochy by bolo užitočné pre mnohých používateľov. Ale opäť sa tvorcovia nových verzií systému Windows rozhodli opustiť pracovnú plochu bez možnosti zobrazovať interaktívnu stránku. Úprimne, veľmi, veľmi ľúto. Osobne mi niekedy takáto príležitosť naozaj chýba.

Prejdime však od slov k činom. Inštalácia webovej stránky na plochu

• Kliknite pravým tlačidlom myši na ľubovoľné voľné miesto na pracovnej ploche

• V dodatočnej ponuke, ktorá sa zobrazí na ploche, vyberte položku Vlastnosti.

• Vyberieme kartu Pracovná plocha a klikneme Prispôsobenie pracovnej plochy ...

• V ponuke Prvky plochy teraz vyberte kartu Web a potom kliknite na tlačidlo Vytvoriť... No, alebo si vyberte položku Moja aktuálna domovská stránka. Na pozadí sa zobrazí stránka stránky, ktorá je v predvolenom prehliadači nastavená ako domovská stránka.

V zobrazenom okne stačí zadať predtým skopírovanú adresu vášho obľúbeného webu z panela s adresou vášho prehliadača.

Zatvorte postupne otvorené dialógové okná, súhlaste so zmenami a kliknite na tlačidlo OK. Teraz máte namiesto nudného obrázku stránku webu, ktorý sa vám páči, a pri pohľade na stránku na ploche môžete v interaktívnom režime sledovať zmeny v sieti.