I just today realized that of my 1.2 MB site (per GTMetrix), 550k of it is a YouTube video.

My web site is a WordPress site, and the current video loads in an iframe.

I want my site to load faster... And not sure how to proceed. If I can make the YouTube video not load until clicked, and just have a thumbnail there instead, it seems like that would be the right play?

I just today realized that of my 1.2 MB site (per GTMetrix), 550k of it is a YouTube video.

My web site is a WordPress site, and the current video loads in an iframe.

I want my site to load faster... And not sure how to proceed. If I can make the YouTube video not load until clicked, and just have a thumbnail there instead, it seems like that would be the right play?

• javascript
• wordpress

• What is the best route to take to fix this? fix what? You haven't really stated what you want fixed, or what is broken - you've stated some facts that have no problem in them – Jaromanda X Commented Aug 10, 2016 at 4:47
• Sorry. Edited to reflect my desires. – Michael Grippi Commented Aug 10, 2016 at 4:50
• look into how to have the youtube video not auto play - in that case it shouldn't start downloading data until the user presses play – Jaromanda X Commented Aug 10, 2016 at 4:52
• if you have &autoplay=1 in the url of the iframe, remove it, you'll be golden – Jaromanda X Commented Aug 10, 2016 at 4:53
• 2 Take a look at: labnol.org/internet/light-youtube-embeds/27941 – Ahmad Essam Commented Aug 10, 2016 at 5:26

3 Answers 3

1. Replace “scr” with “data-src”

<iframe width="560" height="315" data-src="https://www.youtube.com/embed/123456789" frameborder="0" allowfullscreen></iframe>

2. Add Javascript

function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;

Now your site will load faster compared to past.

I have following this blog and it's working for me : http://www.codecanal.com/defer-parsing-javascript-youtube-videos/

You can achieve this with two simple steps......

1. Update your embed code like flowing....

<iframe width="560" height="315" src="" data-src="generic_youtube_url" frameborder="0" allowfullscreen></iframe>

2. Here is the java script part....

function init() { 
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
 if(vidDefer[i].getAttribute('data-src')) {
 vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
 } } } window.onload = init;

Reference For more details:

https://scottdeluzio.com/defer-parsing-javascript-youtube-videos/

https://varvy.com/pagespeed/defer-videos.html

P.S. I am personally using this and it works.

Thanks Sabbir H

The best and faster thing to do is to replace the video iframe by something like a link or an image, and load the iframe on click or another event.

Ahmed Essam linked you a solution, but if you don't want or don't know how to edit files on your wordpress installation, the Embed Video Thumbnail plugin does the job:

https://wordpress.org/plugins/embed-video-thumbnail/