Hvordan få YouTube-videoer til å skalere i bloggen

Denne løsningen fjerner problemet med at embeddede videoer fra YouTube og Vimeo enten blir for små i desktopvisning eller for store i mobilvisning, og skalerer dem til hele den tilgjengelige bredden uansett hvilken enhet du bruker.

 

1. Legg til følgende kode i <head> i malene for forsiden, innlegg, kategori og arkiv  ("Bloggdesign" >> "HTML")

<style>
.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%;
}
</style>

Den beste plasseringen ser ut til å være rett over kodelinjen
<script type="text/javascript">var domainName = ".blogg.no";</script>

 

2. Når du embedder en YouTube (eller Vimeo) legger du til denne taggen rundt embedkoden i html-redigering

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

Det vil da se slik ut i html-redigering

Og her kan du se hvordan det ser ut i praksis - test både på PC og mobil/nettbrett.

 

#bloggno #bloggtips #design #designtips

 

0

Skriv en ny kommentar