Sådan oprettes videoer med flydende bredde med CSS og jQuery

  • Nødvendig viden : Grundlæggende HTML, grundlæggende CSS, grundlæggende jQuery
  • Kræver: jQuery
  • Projekt Tid: 30 minutter
  • Supportfil
  • Denne artikel og demoen er alle tilgængelige på GitHub .

I en verden af ​​lydhøre og flydende layouts på nettet står en medietype i vejen for perfekt harmoni: video. Der er mange måder, hvorpå video kan vises på dit websted. Du er muligvis selv vært for videoen og præsenterer den via HTML5-koden. Du bruger muligvis Youtube eller Vimeo som giver

Gæt hvad. Erklæring om statiske bredder er ikke en god ide i omgivelser med væskebredde. Hvad hvis den overordnede container til den video krymper smallere end den deklarerede 400 pixel? Det vil bryde ud og sandsynligvis se latterligt og pinligt ud.

Enkel og konstrueret, men stadig latterlig og pinlig

Enkel og konstrueret, men stadig latterlig og pinlig

Så kan vi ikke bare gøre dette?

krydse browserkompatibilitetsproblemer og løsninger

Nå, ja, det kan du. Hvis du bruger standard HTML5-video, får det videoen til at passe i bredden på containeren. Det er vigtigt, at du fjerner højdeangivelsen, når du gør dette, så videoens billedformat opretholdes, når den vokser og krymper, så du ikke får akavede 'bjælker' til at udfylde det tomme rum (i modsætning til billeder opretholder den faktiske billedformat uanset størrelsen på elementet). Du kan komme dertil via CSS (og ikke bekymre dig om, hvad der er erklæret i HTML) på denne måde:

video {
bredde: 100%! vigtigt;
højde: auto! vigtigt;
}

Brug af HTML5-video er let at flyde. Bredden er indstillet i procent, så den ændres som sin container, og højden følger med under turen

Brug af HTML5-video er let at flyde. Bredden er indstillet i procent, så den ændres som sin container, og højden følger med under turen


.videoWrapper {
position: relativ;
polstring-bund: 56,25%; / * 16: 9 * /
polstring-top: 25px;
højde: 0;
}
.videoWrapper iframe {
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
}

hvordan man gør huden glat i Photoshop

Uanset hvilken YouTube-iframe-indlejringskode du indsætter i .videoWrapper, dig

Uanset hvilken YouTube-iframe-indlejringskode du indsætter i .videoWrapper, vil du se den præsenteres i en flydende 16: 9-boks

Men, men ... størrelsesforhold, ældre indhold, ikke-teknologiske brugere osv

Ovenstående teknik er fantastisk, men den har flere mulige begrænsninger:

  1. Det kræver omslagselement, så bare lige op kopiering og indsættelse af kode fra YouTube er ude. Brugere skal være lidt mere saavy.
  2. Hvis du har ældre indhold og redesigner for at være flydende, skal alle gamle videoer have HTML-justeringer.
  3. Alle videoer skal have det samme billedformat. Ellers bliver de tvunget til et andet billedformat, og du får 'bjælkerne'. Eller du skal bruge en værktøjskasse med klassenavne, du kan anvende for at justere den, hvilket er en ekstra komplikation.

Hvis en af ​​disse begrænsninger gælder for dig, kan du overveje en JavaScript-løsning. Forestil dig dette: Når siden indlæses, ses alle videoer og deres billedformat gemmes. En gang med det samme, og når vinduet ændres, ændres størrelsen på alle videoer for at udfylde den tilgængelige bredde og opretholde deres billedformat. Bruger jQuery JavaScript-bibliotek, der ser sådan ud:

// Find alle YouTube-videoer
var $ allVideos = $ ('iframe [src ^ =' http: //www.youtube.com ']'),

// Elementet, der er flydende bredde
$ fluidEl = $ ('krop');

// Find ud og gem billedformat for hver video
$ allVideos.each (funktion () {

$ (dette)
.data ('aspectRatio', this.height / this.width)

// og fjern den hårdkodede bredde / højde
.removeAttr ('højde')
.removeAttr ('bredde');

});

// Når vinduet er ændret
$ (vindue) .resize (funktion () {

var newWidth = $ fluidEl.width ();

// Ændr størrelsen på alle videoer i henhold til deres eget billedformat
$ allVideos.each (funktion () {

var $ el = $ (dette);
$ den
.width (newWidth)
.højde (newWidth * $ el.data ('aspectRatio'));

});

// Start en størrelse for at rette alle videoer på sideindlæsning
ændre størrelse ();

Tilføjelse af Vimeo

Vimeo bruger også iframes, så hvad der fungerer for YouTube fungerer for Vimeo. HTML / CSS-teknikken behøver slet ingen ændringer, og jQuery-løsningen kan løses ved at ændre en enkelt linje:

var $ allVideos = $ ('iframe [src ^ =' http: //player.vimeo.com '], iframe [src ^ =' http: //www.youtube.com ']'),

/ Video (Viddler, Blip.tv osv.)

Nogle hjemmebryggningsvideoindlejring såvel som videodelingstjenester som Viddler og Blip.tv bruger gamle indlejrede genstande og indlejringskoder. YouTube gjorde det også, dette var indtil for nylig. Det er ikke-standard, men denne teknik blev meget udbredt, fordi Flash var overalt, og det fungerede bare.

Objekt / integrering lider af det samme problem, som iframes gør: bredde og højde kræves, for at der ikke opstår F & U-resultater.

For en ren HTML / CSS-løsning kan vi igen se på Thierrys teknik, hvis vi er i orden med at tilføje yderligere HTML og pålægge billedformat.

.videoWrapper {
position: relativ;
polstring-bund: 56,25%; / * 16: 9 * /
polstring-top: 25px;
højde: 0;
}
.videoWrapper-objekt,
.videoWrapper integrere, {
position: absolut;
top: 0;
venstre: 0;
bredde: 100%;
højde: 100%;
}

Hvis vi ikke ønsker at gider med den ekstra HTML-indpakning og CSS-komplikationer, kunne vi igen stole på JavaScript. Vores script kan stort set forblive det samme, bortset fra at vi skal kigge efter objekt og integrere elementer i stedet for video- eller iframe-elementer.

hvordan man tegner en konehund

var $ allVideos = $ ('objekt, integrer'),

Og vigtigt at bemærke: jQuery tillader ikke brugen af ​​dens .data () -funktion på disse typer af elementer, så vi bliver nødt til at bruge HTML5-datatributter til at gemme og hente vores billedformatdata. Du kan misbruge en rel-attribut eller noget, hvis du ikke bruger HTML5.

$ (dette)
.attr ('data-aspectRatio', denne.højde / denne.bredde)

...

$ den
.width (newWidth)
.højde (newWidth * $ el.attr ('data-aspectRatio'));

Samler det hele

Så lad os sige, at vi er i den position, hvor vi har masser af ældre indhold, som inkluderer videoer af alle mærker og modeller, og vi redesigner vores websted til at være flydende. Den mest effektive rute vil være at kombinere alt, hvad vi har lært i denne artikel, og sætte det sammen. Se demosiden for den komplette arbejde.

Chris er en webdesigner, der får et spark ud af hvad det nyeste og bedste er inden for webteknologier. Han kan lide at arbejde på alt, hvad der kan hjælpe mennesker, især andre designere. Han er 'lead hucklebucker' ved Wufoo men er mest kendt for CSS-tricks .

Kan du lide dette? Læs disse!