Funksjon for å vise videoer i portrettformat i halvbredde med et sitat til høyre eller venstre
Videoer som lages til sosiale medier er oftest i portrettformat. Generelt er det anbefalt å lage en egen versjon i landskapsformat til nettsidene. Noen ganger er det allikevel ønskelig å bruke video i portrettformat på nett. Dette byr på noen utfordringer.
Standarddimensjonene for en videospiller i Vortex (16:9) gir store svarte felt utenfor selve filmen. En fullbreddevisning av videoer i portrettformat (9:16) tar for mye plass på siden.
Vi har derfor utviklet en funksjon som viser videoer i portrettformat i passe størrelse (halvbredde). For å sikre visuell balanse og knytte filmen til nettinnholdet på en god måte, vises et sitat til høyre eller venstre for videoen.
Funksjonen kan brukes på både forsider, artikkelsider og programsider. Kodesnuttene under tar utgangspunkt i at format på video er 16:9. Se faktaboks nederst på siden for håndtering av andre portrettformater.
Merk: Oppsettet fungerer bare med videoer i portrettformat; videoer i landskapsformat vil forskyve sitatet.
Portrettvideo med sitat til høyre
Lim inn kodesnutten under i kildekoden.
<div class="media-portrait-left">
<div class="vrtx-media-player">
${include:media-player url=[VIDEOFIL] poster=[BILDEFIL] width=[315] height=[560]}
</div>
<div>
<blockquote>
<p>"Dette er sitatet"</p>
<p class="quote-cite">–Dette er den som siteres</p>
</blockquote>
</div>
</div>
Tips: Lukk kildekodevisning og dobbeltklikk på videoboksen for å lettere finne video- og bildefil.
Eksempel
"Folk er veldig hyggelige og åpne. Jeg føler at alle har lyst til å bli kjent med noen. Så det er jo bare å snakke til folk."
– Karoline, førsteårsstudent
Portrettvideo med sitat til venstre
<div class="media-portrait-right">
<div class="vrtx-media-player">
${include:media-player url=[VIDEOFIL] poster=[BILDEFIL] width=[315] height=[560]}
</div>
<div>
<blockquote>
<p>"Dette er sitatet"</p>
<p class="quote-cite">–Dette er den som siteres</p>
</blockquote>
</div>
</div>
Tips: Lukk kildekodevisning og dobbeltklikk på videoboksen for å lettere finne video- og bildefil.
Eksempel
"Folk er veldig hyggelige og åpne. Jeg føler at alle har lyst til å bli kjent med noen. Så det er jo bare å snakke til folk."
– Karoline, førsteårsstudent
Videoer i andre formater enn 9:16
Kodesnuttene over tar utgangspunkt i filmer med format 16:9. Hvis du har filmer i andre portrettformater, f.eks. 4:5, bør størrelsen på spilleren endres litt. Bredden bør holdes fast på 315, mens høyden justeres i henhold til proporsjonene.
- 4:5: width=[315] height=[394]
- 2:3: width=[315] height=[473]