Facade Method: Adding a picture that when clicked loads the YouTube video you link too. This GREATLY decreases page load time.
Can anyone give me a step-by-step on how to implement the Facade Method for YouTube embedded videos?
After hours of searching and testing, I found the solution.
Example Page - https://strengthworld.store/products/squat-bench-press-deadlift-powerlifting-programs
Here it is:
Step 1 - Ad the standard YouTube Embed code
Step 2 - Add This Code after your src=“YourVideoURL”
srcdoc=“*{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}<img src=YourImageURL alt=‘Your ALT Text’>
”
Step 3 - Add in your URLs
Replace everything in BOLD with your own info.
Note: YourImageURL can be anything, such as the URL for the YouTube Video, but it is best if you use a file uploaded to your Shopify Files section.
Step 4 (optional) - Additional Features
Change the Play Icon - You can also change the “” icon to any symbol or emoji you want.
AutoPlay after clicking - Add “?autoplay=1” at the end of URL
Recommend ONLY your channel videos after video - Add “?rel=0” at end of URL
IMPORTANT: if you want to add both of these features, or more that you find, you must add “&” instead of the second “?”.
Example: https://www.youtube.com/embed/rIR2JDNEJ0U?autoplay=1&rel=0
What this does is allow you place a compressed image with a play icon over it so when anyone clicks the image it then loads the YouTube video (relatively quickly) and plays it automatically. This takes the page loading pressure off of your site and puts it on YouTube.
BOOM! Your page is instantly faster!
If this helped you, I would appreciate you checking out my store (STRENGTH WORLD) to see if there’s anything you like!
3 Likes
Hi there,
You can try YouTube SiSi app. It works in a similar way. The app embeds a thumbnails slider on your product page. And the videos are added using a search by keyword.
The implementation of the code is located in Snippets > sisi.liquid
The ?autoplay=1 isn’t working! I added it with YouTube-Embed-URL inside anchor tag. But its not working on click the video is not playing automatically.
Any suggestions???
Thanks,
Milu
If I remember correctly, the autoplay function only works for some, but not all browsers. I’m not sure why, but only some have the functionality.
This is interesting, though I haven’t tried it. Mainly as it looks like a lot of work. Seem like you would have to create (and host) a cover image for every video. Any best pratice on how people do that?