YouTube Fieldtype

  • Not sure if anyone is interested and I'm not sure if this is considered changing the source code. However, I have made a slight change to the Youtube fieldtype so it lazy loads. I utilize the following code for lazy loading https://github.com/verlok/lazyload


    Let me know if anyone is interested. Just by lazy loading the Youtube video and a couple of small SVG's in my footer my page load time got cut in more than half from mid 3 seconds to 1.5ish seconds.

  • Hi Matt,


    I don't think the YouTube field type at its current implementation prevents you from doing that. What is your desired markup?


    If what you need is:


    HTML
    1. <iframe class="lazy" data-src="https://www.youtube.com/embed/{videoID}" poster="lazy.jpg"></iframe>


    Then you should be able to use output="youtubeID":

    HTML
    1. <iframe class="lazy" data-src="https://www.youtube.com/embed/<perch:content id="video" type="youtube" output="youtubeID">" poster="lazy.jpg"></iframe>
  • I was making adjustments to the YouTube field type to get these changes done automatically. However, using Hussein's method above is cleaner. So I would use his code from above. I utilize the below code as a block so people can add video whenever they like in the main body of the page.


    Code
    1. <iframe class="lazy" data-src="https://www.youtube.com/embed/<perch:content id="video" type="youtube" output="youtubeID">"></iframe>


    Next at the bottom of your page where your scripts are put in the scripting for the lazy load. There are many options but I use this and it works fine.

    Code
    1. <script src="/_scripts/lazyload.min.js"></script>
    2. <script>
    3. (function () {
    4. new LazyLoad({
    5. elements_selector: ".lazy"
    6. });
    7. }());
    8. </script>

    Once you do that you are set to go with lazy loading videos, iframes or images on your page. All you have to do at that point is change src to data-src and add a class of lazy to the elements you are lazy loading. Keep in mind it only is productive to lazy load things that are farther down the page. Also your page won't clear validation with this method because we are using data-src instead of src. The speed benefits in my opinion far out weight the downside of not validating.