Få hurtigere loadtid på dine sider der indeholder Youtube videoer

[fusion_builder_container hundred_percent=”no” hundred_percent_height=”no” hundred_percent_height_scroll=”no” hundred_percent_height_center_content=”yes” equal_height_columns=”no” menu_anchor=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” status=”published” publish_date=”” class=”” id=”” link_color=”” link_hover_color=”” border_size=”” border_color=”” border_style=”solid” margin_top=”” margin_bottom=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_position=”center center” background_repeat=”no-repeat” fade=”no” background_parallax=”none” enable_mobile=”no” parallax_speed=”0.3″ background_blend_mode=”none” video_mp4=”” video_webm=”” video_ogv=”” video_url=”” video_aspect_ratio=”16:9″ video_loop=”yes” video_mute=”yes” video_preview_image=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″][fusion_builder_row][fusion_builder_column type=”1_1″ layout=”1_1″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”no”][fusion_imageframe image_id=”12581|full” max_width=”” style_type=”” blur=”” stylecolor=”” hover_type=”none” bordersize=”” bordercolor=”” borderradius=”” align=”none” lightbox=”no” gallery_id=”” lightbox_image=”” lightbox_image_id=”” alt=”” link=”” linktarget=”_self” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″]https://websitecare.io/wp-content/uploads/YouTube-Embed-Uden-Længere-Loadtid.png[/fusion_imageframe][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Få hurtigere loadtid på dine sider der indeholder Youtube videoer

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Du har en hjemmeside hvor du gerne vil vise nogle Youtube videoer på, men samtidig vil du ikke have det går ud over hastigheden på siden og derved risikerer at miste besøgende fordi det tager for langt tid at loade (og beholde den høje PageSpeed score du har).

Der er en løsning, hvor du kan få Youtube videoer på siden samtidig med at du har en lav loadtid.

Du skal lave lidt kodearbejde for at få det til at virke. Der er plugins til WordPress og andre CMS som kan det samme, men jeg vælger at vise den “rå” løsning så det kan implementeres hos alle.

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Hvad er løsningen?

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Normalt når du ligger en Youtube video ind på din hjemmeside, så sker det med Youtubes embed funktion, der giver dig en HTML iframe kode. Eksempel:

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

<iframe width="560" height="315" src="https://www.youtube.com/embed/2lAe1cqCOXo" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

[/fusion_text][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Det giver øget loadtid fordi du skal indlæse hele den iframe, deres scripts m.m. I stedet for den normale løsning, så kan du vælge løsning hvor du simpelthen indsætter et almindeligt billede og når man klikker på billedet, at den så indlæser YouTubes iframe kode med autoplay sat til ja.

Jeg viser hele koden der skal til i bunden af siden, så du bare kan hente en samlet løsning.

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Løsningen del 1 / 3 – Billedet

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Du skal bruge din youtube url med det samme. Eksempel: https://www.youtube.com/watch?v=2lAe1cqCOXo

[ YouTube Rewind 2019: For the Record | #YouTubeRewind ]

Du skal her tage dit video ID og indsætte det i en HTML kode. Video ID´et i mit eksempel er: 2lAe1cqCOXo

HTML koden:

i HTML koden skal du indsætte dit youtube ID under data-id og bredden på videoen under data-width samt højden under data-height

og så billedet indsætter du IDet på videoen  i billed URLen.

CSS:

I CSS koden her skal du udskifte playbutton.png med din egen URL til dit playbutton billede. Jeg har lagt en fil du kan download nedenunder til playbutton.

<style>
.wcioYouTubeVideoContainer {
cursor:pointer
}

.wcioYouTubeVideoContainer::after {
content: ” “;
background: url(playbutton.png);
width: 68px;
height: 48px;
position: absolute;
left: 0;
right: 0;
margin: 0px auto;
top: 62%;
}

.wcioYouTubeVideoContainer.changed::after {
background: none;
}
</style>

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Løsningen del 2 / 3 – Javascript

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Løsningen her er lavet med jQuery, så du skal bruge det på din side, eller kodet det anderledes så den ikke kræver jQuery.

Koden her ser om man har klikker på den DIV der indeholder youtube billedet og tager Video IDet du indsatte i data-id og skifter HTML koden ud med den korrekte iframe kode fra embed.

I javascript koden behøver du ikke ændre noget for at den virker.

<script type=”text/javascript”>
jQuery(function($) {

jQuery(‘.wcioYouTubeVideoContainer’).click(function(){
wcioYoutubeSwap( $(this) );
});

function wcioYoutubeSwap( thisObj ) {
var youtubeId = thisObj.data(“id”);
var videoWidth = thisObj.data(“width”);
var videoHeight = thisObj.data(“height”);

$(thisObj).toggleClass(‘changed’);

thisObj.html(‘<iframe width=”‘+videoWidth+'” height=”‘+videoHeight+'” src=”https://www.youtube.com/embed/’+youtubeId+’?autoplay=1″ frameborder=”0″ allowfullscreen></iframe>’);

console.log(youtubeId);
console.log(videoWidth);
console.log(videoHeight);
}

});

</script>

[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Løsningen del 3 / 3 – Sammensæt koden

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]Du skal nu sammensætte koden , men jeg har gjort det nemt for dig. Du kan hente det hele i denne fil:

HTML, CSS & Javascript kode[/fusion_text][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”1″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

Filer til download:

[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]

[/fusion_text][/fusion_builder_column][fusion_builder_column type=”1_1″ layout=”1_4″ spacing=”” center_content=”no” link=”” target=”_self” min_height=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” hover_type=”none” border_size=”0″ border_color=”” border_style=”solid” border_position=”all” border_radius=”” box_shadow=”no” dimension_box_shadow=”” box_shadow_blur=”0″ box_shadow_spread=”0″ box_shadow_color=”” box_shadow_style=”” padding_top=”” padding_right=”” padding_bottom=”” padding_left=”” margin_top=”” margin_bottom=”” background_type=”single” gradient_start_color=”” gradient_end_color=”” gradient_start_position=”0″ gradient_end_position=”100″ gradient_type=”linear” radial_direction=”center center” linear_angle=”180″ background_color=”” background_image=”” background_image_id=”” background_position=”left top” background_repeat=”no-repeat” background_blend_mode=”none” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=”” filter_type=”regular” filter_hue=”0″ filter_saturation=”100″ filter_brightness=”100″ filter_contrast=”100″ filter_invert=”0″ filter_sepia=”0″ filter_opacity=”100″ filter_blur=”0″ filter_hue_hover=”0″ filter_saturation_hover=”100″ filter_brightness_hover=”100″ filter_contrast_hover=”100″ filter_invert_hover=”0″ filter_sepia_hover=”0″ filter_opacity_hover=”100″ filter_blur_hover=”0″ last=”no”][fusion_title title_type=”text” rotation_effect=”bounceIn” display_time=”1200″ highlight_effect=”circle” loop_animation=”off” highlight_width=”9″ highlight_top_margin=”0″ before_text=”” rotation_text=”” highlight_text=”” after_text=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” content_align=”left” size=”2″ font_size=”” animated_font_size=”” fusion_font_family_title_font=”” fusion_font_subset_title_font=”” fusion_font_variant_title_font=”” line_height=”” letter_spacing=”” margin_top=”” margin_bottom=”” margin_top_mobile=”” margin_bottom_mobile=”” text_color=”” animated_text_color=”” highlight_color=”” style_type=”default” sep_color=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]Det færdige eksempel kan ses nedneunder og den fulde kode m.m.[/fusion_title][fusion_text columns=”” column_min_width=”” column_spacing=”” rule_style=”default” rule_size=”” rule_color=”” hide_on_mobile=”small-visibility,medium-visibility,large-visibility” class=”” id=”” animation_type=”” animation_direction=”left” animation_speed=”0.3″ animation_offset=””]Det færdige eksempel kan ses her og den fulde kode m.m. kan hentes på Github: https://github.com/websitecareio/snippets[/fusion_text][fusion_code]PGRpdiBjbGFzcz0id2Npb1lvdVR1YmVWaWRlb0NvbnRhaW5lciIgZGF0YS1pZD0iMmxBZTFjcUNPWG8iIGRhdGEtd2lkdGg9IjM1MCIgZGF0YS1oZWlnaHQ9IjI4MyI+CjxpbWcgc3JjPSJodHRwczovL2ltZy55b3V0dWJlLmNvbS92aS8ybEFlMWNxQ09Yby8wLmpwZyI+CjwvZGl2PgoKPHNjcmlwdCB0eXBlPSJ0ZXh0L2phdmFzY3JpcHQiPgpqUXVlcnkoZnVuY3Rpb24oJCkgewoKICAgIGpRdWVyeSgnLndjaW9Zb3VUdWJlVmlkZW9Db250YWluZXInKS5jbGljayhmdW5jdGlvbigpewogICAgICAgIHdjaW9Zb3V0dWJlU3dhcCggJCh0aGlzKSApOwogICAgfSk7CgogICAgZnVuY3Rpb24gd2Npb1lvdXR1YmVTd2FwKCB0aGlzT2JqICkgewogICAgICB2YXIgeW91dHViZUlkID0gdGhpc09iai5kYXRhKCJpZCIpOwogICAgICB2YXIgdmlkZW9XaWR0aCA9IHRoaXNPYmouZGF0YSgid2lkdGgiKTsKICAgICAgdmFyIHZpZGVvSGVpZ2h0ID0gdGhpc09iai5kYXRhKCJoZWlnaHQiKTsKICAgICAgCiAgICAgICQodGhpc09iaikudG9nZ2xlQ2xhc3MoJ2NoYW5nZWQnKTsKICAgICAgCiAgICAgIHRoaXNPYmouaHRtbCgnPGlmcmFtZSB3aWR0aD0iJyt2aWRlb1dpZHRoKyciIGhlaWdodD0iJyt2aWRlb0hlaWdodCsnIiBzcmM9Imh0dHBzOi8vd3d3LnlvdXR1YmUuY29tL2VtYmVkLycreW91dHViZUlkKyc/YXV0b3BsYXk9MSIgZnJhbWVib3JkZXI9IjAiIGFsbG93ZnVsbHNjcmVlbj48L2lmcmFtZT4nKTsKICAgICAgCiAgICAgIGNvbnNvbGUubG9nKHlvdXR1YmVJZCk7CiAgICAgICAgICAgIGNvbnNvbGUubG9nKHZpZGVvV2lkdGgpOwogICAgICAgICAgICBjb25zb2xlLmxvZyh2aWRlb0hlaWdodCk7CiAgICB9CiAgIAp9KTsKCjwvc2NyaXB0PgoKPHN0eWxlPgoud2Npb1lvdVR1YmVWaWRlb0NvbnRhaW5lciB7CiAgIGN1cnNvcjpwb2ludGVyIAp9Cgoud2Npb1lvdVR1YmVWaWRlb0NvbnRhaW5lcjo6YWZ0ZXIgewpjb250ZW50OiAiICI7CmJhY2tncm91bmQ6IHVybChodHRwczovL3dlYnNpdGVjYXJlLmlvL3dwLWNvbnRlbnQvdXBsb2Fkcy9wbGF5YnV0dG9uLnBuZyk7CndpZHRoOiA2OHB4OwpoZWlnaHQ6IDQ4cHg7CnBvc2l0aW9uOiBhYnNvbHV0ZTsKbGVmdDogMDsKcmlnaHQ6IDA7Cm1hcmdpbjogMHB4IGF1dG87CnRvcDogNjIlOwp9Cgoud2Npb1lvdVR1YmVWaWRlb0NvbnRhaW5lci5jaGFuZ2VkOjphZnRlciB7CmJhY2tncm91bmQ6IG5vbmU7Cn0KPC9zdHlsZT4=[/fusion_code][/fusion_builder_column][/fusion_builder_row][/fusion_builder_container]

close

Få mine tips direkte i din indbakke

Tilmeld dig for at modtage mit nyhedsbrev og hold dig opdateret med det nyeste herfra.

Vi spammer ikke! Læs vores privatlivspolitik hvis du vil vide mere.

Skriv en kommentar