Posted in
15
2:58 am, January 21, 2021
add a youtube video preloader function, lazy load youtube [fixed]
I noticed that this list page: https://kruxor.com/list/rs3_efficient_skill/
Loads about 29 (well exactly 29) youtube video embeds and was wondering if there was an easy way to replace these iframes with the image thumbnail to make the page load time a bit better.
I think this is also known as lazy loading.
Here is a method i found on css tricks: https://css-tricks.com/lazy-load-embedded-youtube-videos/
This does not actually use any additional javascript to achieve this but rather the srcdoc feature of the iframe element. Very clever.
I already have a general function that can create an iframe from a youtube video url, i will try and add this new code into this function so i can just generate it for any video!
File: functions.class.php
Class: functions
Function: youtube_thumbnail();
Function Options: $url = "", $ttype = "hqthumb", $height = "420", $autoplay = false
Notes: it needs to have the links in srcdoc to not have the ' or " of this seems to break it.
HTML
<iframe
width="560"
height="315"
src="https://www.youtube.com/embed/Y8Wp3dafaMQ"
srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/Y8Wp3dafaMQ?autoplay=1><img src=https://img.youtube.com/vi/Y8Wp3dafaMQ/hqdefault.jpg alt='Video The Dark Knight Rises: What Went Wrong? – Wisecrack Edition'><span>▶</span></a>"
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
title="The Dark Knight Rises: What Went Wrong? – Wisecrack Edition"
></iframe>PHP
/* Here is the original embed function */
function youtube_thumbnail($url = "", $ttype = "hqthumb", $height = "420", $autoplay = false) {
$url_array = parse_url($url);
if(!is_array($url_array)) {
return false;
}
if(!isset($url_array["query"])) {
return false;
}
parse_str($url_array["query"],$query_string_array); // pass into array rather than variables.
// var_dump($query_string_array);
if(!isset($query_string_array['v'])) { return false; }
$v = $query_string_array['v'];
$thumb = "";
if($ttype == "default") {
$thumb = "https://img.youtube.com/vi/$v/default.jpg";
}
if($ttype == "hqthumb") {
$thumb = "https://img.youtube.com/vi/$v/hqdefault.jpg";
}
if($ttype == "iframe") {
$thumb = "<iframe width='100%' height='$height' src='https://www.youtube.com/embed/$v?rel=0' frameborder='0' allowfullscreen></iframe>";
if($autoplay) {
$thumb = "<iframe width='100%' height='$height' src='https://www.youtube.com/embed/$v?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
}
}
return $thumb;
}
// added an iframe_lazy option to this function
if($ttype == "iframe_lazy") {
$thumb = '<iframe width="560" height="'.$height.'" src="https://www.youtube.com/embed/'. $v .'?rel=0" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/'. $v .'?autoplay=1><img src=https://img.youtube.com/vi/'. $v .'/hqdefault.jpg><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
// new function
function youtube_thumbnail($url = "", $ttype = "hqthumb", $height = "420", $autoplay = false) {
$url_array = parse_url($url);
if(!is_array($url_array)) {
return false;
}
if(!isset($url_array["query"])) {
return false;
}
parse_str($url_array["query"],$query_string_array); // pass into array rather than variables.
// var_dump($query_string_array);
if(!isset($query_string_array['v'])) { return false; }
$v = $query_string_array['v'];
$thumb = "";
if($ttype == "default") {
$thumb = "https://img.youtube.com/vi/$v/default.jpg";
}
if($ttype == "hqthumb") {
$thumb = "https://img.youtube.com/vi/$v/hqdefault.jpg";
}
if($ttype == "iframe") {
$thumb = "<iframe width='100%' height='$height' src='https://www.youtube.com/embed/$v?rel=0' frameborder='0' allowfullscreen></iframe>";
if($autoplay) {
$thumb = "<iframe width='100%' height='$height' src='https://www.youtube.com/embed/$v?rel=0&autoplay=1' frameborder='0' allowfullscreen></iframe>";
}
}
if($ttype == "iframe_lazy") {
$thumb = '<iframe width="560" height="'.$height.'" src="https://www.youtube.com/embed/'. $v .'?rel=0" srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=https://www.youtube.com/embed/'. $v .'?autoplay=1><img src=https://img.youtube.com/vi/'. $v .'/hqdefault.jpg><span>▶</span></a>" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>';
}
return $thumb;
}View Statistics
This Week
135
This Month
680
This Year
0
Add Comment
Other Items in site bugs
making the search page nicer
add hero title to category listing page [not done]
category listing not working on categories with spaces [not fixed]
Changing the default hero image based on the category name [not yet done]
still more comment spam
search bug Above
weird search results being recorded
this is a weird one table underline appearing and dissapearing on mouse over
change images to upload file also to imgur [reported]
install codemirror for textareas [added]
add a youtube video preloader function, lazy load youtube [fixed]
spin rotate an element on mouse over [css]
add a comment recording system for posts [idea]
fix view page for search links [reported]
should have a different menu colour [reported]
style page numbers [fixed]
linking search results to view pages [finished] 🤣
badge border colour is too dark or light on number badges [fixed]
badge placement is offset in list pages [fixed]
top bar overflow issues [fixed]
Related Search Terms
Other Categories in Code
c testing apache apps asp bat bootstrap bootstrap templates core css css grid design elements fancybox fonts foundation framework gimp git html icons ideas images javascript jquery js linux mac nginx node php php functions php simple html dom pi400 python react sections site bugs site documentation sql sqlite sublime svg templates tools virtual box webdev windows wordpress
