0

So basically I would like to make a little lazy load code to my site.

Every Youtube video has a thumbnail and usually the url is something like this:

http://img.youtube.com/vi/<THEVIDEOID>/maxresdefault.jpg

I would like to detect this and if it's true, this can be a click event, and after you clicked the image, you get the iframe and you can play the video.

Now, I know there is thousand and thousand outsiders plugin in the internet, but I don't want to load any other code, just that function what is really necessary for this script to work (I hate big load times like anyone else).

Sometimes the outside plugins has thousand, and thousand unnecessary functions for me, like check on every load I chose the click method or the scroll method, and other not useful things.

That's why I decided I trying to build my own.

I saw this post in the search results, but I would like to build this on jQuery way.

Note:

This need for a Wordpress site, that's why I use jQuery instead of $.

This what I have now:

    jQuery(document).ready(function() {
      function youtubecheck(){
        var myregexp = /[a-z,A-Z,0-9]/g;//Regexp for videoid
        var imageurl="http://img.youtube.com/vi/"+myregexp+"/maxresdefault.jpg";    // This doesn't sounds right, I need to find out something else.
        if (jQuery("img").attr("src")=== "imageurl"){
           var autoplay="?autoplay=1/"//this for iframe
           jQuery(this).addClass("YT-image");    // Obviously we need class, because we don't whant to do this with all images, just with YT-imgaes.
          jQuery(".YT-image").click(function() {
            jQuery(".YT-image").replaceWith('<iframe width="560" height="315" src="https://www.youtube.com/embed/'+myregexp+autoplay+'" frameborder="0" allowfullscreen></iframe>');    // maybe we need each for every image? Also I'm not sure about "myregexp" variable in here.
      });
    }
  }
  youtubecheck();
});
marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user3545446
  • 137
  • 8
  • http://stackoverflow.com/questions/3452546/javascript-regex-how-to-get-youtube-video-id-from-url – Andreas Apr 14 '16 at 10:12
  • @Andreas I think this can't be work becouse on the answer the keything is this: "`window.location.search.split('v=')[1];`" but we have a close tag in the end like `/vi/` but not was bad! – user3545446 Apr 14 '16 at 10:17

1 Answers1

1

Changed your if condition and regex 

    jQuery(document).ready(function() {
  function youtubecheck() {
    if (/img\.youtube\.com\/vi\/[a-z,A-Z,0-9]+\/maxresdefault\.jpg/g.test(jQuery("img").attr("src"))) {
      var videoId = /img\.youtube\.com\/vi\/(.*?)\/maxresdefault\.jpg/g.exec(jQuery("img").attr("src"))[1];
      var autoplay = "?autoplay=1/"; //this for iframe
      jQuery("img").addClass("YT-image"); //Obviously we need class, becouse we don't whant to do this with all images, just with YT-imgaes.
      jQuery(".YT-image").click(function() {
        jQuery(this).replaceWith('<iframe width="560" height="315" src="https://www.youtube.com/embed/' + videoId + autoplay + '" frameborder="0" allowfullscreen></iframe>'); // maybe we need each for every image? Also I'm not sure about "myregexp" varible in here.
      });
    }
  }
  youtubecheck();
});

Updated the code this works

LazyDeveloper
  • 599
  • 3
  • 8