Webstick.club logo Wordpress, Design, SEO, Speed blogg

Gjør YouTube-video responsiv med CSS (også Vimeo)

Gjør Vimeo og Youtube-video responsiv

Du kan løse dette problemet med både CSS og Javascript. CSS er mye enklere, så det er slik vi skal gjøre det. Vimeo eller Youtube gjør ingen forskjell, du kan bruke dette på alle videoer.

Gjør video responsiv med CSS

For å komme i gang, hent inn Vimeo eller Youtube iframe-innbyggingskoden på siden til Vimeo / Youtube-videoen og plasser den på nettstedet ditt. Du lager en div rundt den på en slik måte at den vil se ut som den nedenfor.

<div class="video-container"><iframe>.................</iframe></div>

Du kan fjerne høyde og bredde fra Youtube-koden hvis du vil, men du kan også la den være som den er. Legg til følgende i css:

.video-container {
	position:relative;
	padding-bottom:56.25%;
	padding-top:30px;
	height:0;
	overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
	position:absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
}

Den øvre delen fokuserer på videokontaineren og den nedre delen på det som er i containeren. I dette tilfellet er det iframe, men du kan også bruke denne koden med objekter og innebygde elementer.

Det er ikke mer arbeid å gjøre. Ser du, det er enkelt å lage en YouTube- eller Vimeo-video med CSS. Videoen din vises nå perfekt i alle nettlesere på PC, bærbar PC, nettbrett og mobil.



Divi



Bla opp