Youtube video is a wonderful tool for sales marketing and delivering campaigns and products over the internet. However, on a website, Youtube video seems like a “heavy rock” pulling off to a website load.

In this regard, this tutorial will make your website “clever and furious” to make internet surfers comfortable in browsing to web contents. Attached photo has 60% PageSpeed Score and 25% YSlowScore in the previous settings. (Red and orange [leverage browser caching] below soon will be posted here about how it fixed).

Meanwhile, the website had 4 embedded Youtube videos on the homepage which request 1.1MB each itself that resulting to 4.4MB or 8 seconds load time overall. Plus, the minimum page size 2.58MB equals 6.98MB or 16.8s fully load time. THAT’S ANNOYS INTERESTED AUDIENCE!

Page load is very important to suit audience as well as in the internet marketing campaign. If website load too slow, you will lost your sales. Attached photo above is before the website optimized.

Mark that the homepage has 4 videos with an “iframe” tags in old use of iframe attribute compare to the modern coding strategy. We have made a developed script to solve the problem homepage’s youtube video behavior.

Javascript

This function will make videos visible upon scrolling up and down (at least mousewheel or scrollbar moved once) and will attach given Youtube URLs from “data-src” to the “SRC” value. We use variable “vidDefer” to get iframe tag. Follwing the use “for” that scans “data-src” value to be copied to the “src” value.

Window.Onscroll = function() {ytdinit()}; to execute the function that controls the showing of Youtube video which not requested in the first browse where “base.js” with exactly 1.1MB size made the website loads too slow.

Now, the src attribute has a blank value (below photo shown) that is reserved for the scroll event. Since this WordPress theme’s Youtube shortcode has an old style of embedding Youtube videos, I created “data-src” as the source of the “src” to be copied to its blank value. Check out the image below.

Above code code, there shows the different URLs of Youtube (//www.youtube.com and youtu.be) but that’s not the point here. These two from the conditional statements make a different outcome to the frontend. When user put a shortenURL (from the backend), it shows the point we are discussing here, the certain Youtube video. “Youtube” indicated above will shows an old style of HTML youtube embedding.

Now, after finishing all steps above, there it goes! Scroll and show Youtube videos but hide on the first browse. In terms of page behavior, these steps might help in other stance. Hope you like it!