Sådan loader du indlejrede YouTube videoer hurtigere

Arbejder du med hastigheds-optimering af din hjemmeside, så vil du på et tidpunkt rende ind i problemer, hvis du benytter dig af indlejrede videoer fra YouTube. Indlejrede videoer gør nemlig dine sider rigtig tunge, ja faktisk kan de øge din sides størrelse med over 500 kB. Det lyder måske ikke af meget, men kigger man på den gennemsnitlige side-størrelse på en hjemmeside, så er 500 kb altså ikke så lidt endda!

Nedenfor kan du se en udsnit af en test med Pingdom Tool på en side med en YouTube-video indlejret.

Youtube indlejring hastighed

Vil du gerne have en hurtigere hjemmeside og ønsker du ikke at opgradere dit webhotel, så kan en optimering af din YouTube-indlejring måske være noget du bør kigge på.

Det er faktisk lettere end man skulle tro, at optimere levering af YouTube videoer.

Det handler i al sin enkelthed om, at din side ikke skal loade selve iframen med videoen før den skal bruges. Istedet vises et billede med videoens thumbnail, og når man klikker på dette så startes videoen.

Nedenstående script og styling gør præcis dette ved hjælp af jQuery.

<style>
 .video-container img {
   bottom: 0;
   display: block;
   left: 0;
   margin: auto;
   max-width: 100%;
   width: 100%;
   position: absolute;
   right: 0;
   top: 0;
   border: none;
   height: auto;
   cursor: pointer;
   -webkit-transition: .4s all;
   -moz-transition: .4s all;
   transition: .4s all;
 }
 .video-container img:hover {
   -webkit-filter: brightness(75%);
 }
 .video-container .play {
   height: 72px;
   width: 72px;
   left: 50%;
   top: 50%;
   margin-left: -36px;
   margin-top: -36px;
   position: absolute;
   background: url("//i.imgur.com/TxzC70f.png") no-repeat;
   cursor: pointer;
 }
 </style>
 <script>
 $(document).ready(function(){
   $('#replace').click(
     function labnolIframe() {
     var iframe = document.createElement("iframe");
     var embed = "https://www.youtube.com/embed/<DIT VIDEO ID>?rel=0&amp;showinfo=0&autoplay=1";
     iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
     iframe.setAttribute("frameborder", "0");
     iframe.setAttribute("allowfullscreen", "1");
     this.parentNode.replaceChild(iframe, this);
   }
 );
 });
 </script>
 <div class="video-container" ><div id="replace"><img src="URL TIL THUMBNAIL" alt="video"><div class="play"></div></div></div>

Alt hvad du skal gøre er at udskifte “URL TIL THUMBNAIL” med url´en til din video´s thumbnail. Du kan med fordel se YouTubes standard thumbnail url´er her. Du skal desuden skifte “<DIT VIDEO ID>” ud med id´et på din video.

Anvender du WordPress, kan det være svært at bruge et script som det ovenfor direkte. Her kan du istedet lave en shortcode. Koden til denne shortcode kan du se herunder. Den skal som altid indsættes i din functions.php fil i dit tema.

<?php
 function videoloader($atts) {
 ob_start();
 $a = shortcode_atts( array(
 "videoid" => "",
 "videoimg_path" => "",
 ), $atts );
 global $videoid;
 global $videoimg_path;
 $videoid = $a['videoid'];
 $videoimg_path = $a['videoimg_path'];
 ?>
 <style>
 .video-container img {
   bottom: 0;
   display: block;
   left: 0;
   margin: auto;
   max-width: 100%;
   width: 100%;
   position: absolute;
   right: 0;
   top: 0;
   border: none;
   height: auto;
   cursor: pointer;
   -webkit-transition: .4s all;
   -moz-transition: .4s all;
   transition: .4s all;
 }
 .video-container img:hover {
   -webkit-filter: brightness(75%);
 }
 .video-container .play {
   height: 72px;
   width: 72px;
   left: 50%;
   top: 50%;
   margin-left: -36px;
   margin-top: -36px;
   position: absolute;
   background: url("//i.imgur.com/TxzC70f.png") no-repeat;
   cursor: pointer;
 }
 </style>
 <script>
 $(document).ready(function(){
    $('#replace').click(
     function labnolIframe() {
     var iframe = document.createElement("iframe");
     var embed = "https://www.youtube.com/embed/<DIT VIDEO ID>?rel=0&amp;showinfo=0&autoplay=1";
     iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
     iframe.setAttribute("frameborder", "0");
     iframe.setAttribute("allowfullscreen", "1");
     this.parentNode.replaceChild(iframe, this);
   }
 );
 });

</script>
 <div class="video-container" ><div id="replace"><img src="<?php echo $videoimg_path; ?>" alt="video"><div class="play"></div></div></div>
 <?php
 return ob_get_clean();
 }
 global $wp_query;
 if (isset($wp_query->post->ID) ) {
 add_shortcode( 'videoloader', 'videoloader' );
 }
 ?>

Denne shortcode tager to parametre, nemlig videoens id og url´en til videos thumbnail.

Det du skal indsætte i dine indlæg for at indlejre en video er således:

[videoloader videoid=”VIDEOID”  videoimg_path=”THUMBNAIL URL”]

Herunder kan du se en DEMO af lightweight leveringen af en YouTube video:

video

 

  Skrevet af: Redaktionen     28-07-2017     Skrevet i: Guides

Skriv et svar

Din e-mailadresse vil ikke blive publiceret.



Nyt fra bloggen

Internettets og World Wide Web´s historie

IMAP understøttelse og plads på mailhoteller

Sådan tager du manuelt backup af din WordPress hjemmeside

Sådan ser du hvor mange andre hjemmesider der er hostet på din server

Sådan loader du indlejrede YouTube videoer hurtigere

Læs også

Billigt Webhotel

Leder du efter markedets billigste hosting-løsning? I denne artikel giver vi dig en sorteret liste over de billigste webhoteller i Danmark. Læs mere...


Hjemmeside Hosting

Har du en hjemmeside som du gerne vil have hostet? Så lad os guide dig igennem hjemmeside-hosting-junglen! Læs mere...


Webhotel Priser

Har du brug for at finde og sammenholde priser på webhoteller? Så læs denne guide og få et samlet pris-overblik. Læs mere...


Rabatkuponer til webhoteller

Kunne du godt tænke dig at spare lidt penge når du skal ud og købe et webhotel? Vi har her lavet en samling af alle de rabatkuponer der findes til webhoteller lige nu. Læs mere...


Trustpilot-score oversigt

Du finder her en samlet oversigt over, hvordan de forskellige hosting-udbydere er blevet anmeldt på Trustpilot og hvilken score de har fået. Læs mere...


Kom godt i gang med et webhotel

Her finder du en kort beskrivelse af, hvordan du hurtigt, nemt og uden problemer kommer i gang med hosting via webhoteller. Læs mere...


Hvordan får jeg mit eget domæne?

Denne artikel fortæller dig, hvordan du får dit helt eget domæne. Vi beskriver blandt andet, hvordan du køber og registrerer dit helt eget domæne. Læs mere...

Kategorier

Domæne

Guides

Hosting

Infografikker

Plugins

SSL

WordPress