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=””]

[/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?

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>

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.

Løsningen del 1 / 3 – Billedet

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.

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

Løsningen del 2 / 3 – Javascript

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.

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>

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

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_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]

Post Views: 1.256

Få mine tips direkte i din indbakke

Skriv en kommentar Annuller svar