Sådan loader du hurtigere og embedded YouTube videoer

Bloggen
>
Guides
>
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.

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: