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.
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;
}
.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
Ovenstående teknik er fantastisk, men den har flere mulige begrænsninger:
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 ();
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 ']'),
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'));
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 .
