Defer iframes for videos and embeds

[ghodson]

Hey Guys

I am noticing that the video embeds cannot defer javascript using any defer js plugins.
This is slowing my sight considerably as i have quiet a few posts using embeds.
Can you please advise on how to achieve?

Thanks

[Laura]

Hello, will assign the ticket to a higher support lever who can help and advise you in your query.
Thanks! 🙂

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

Laura Solanes - Graphic Designer and Web Designer

Please be patient as I try to answer each topic as fast as i can.

If you like the theme or the support you've received please consider leaving us a review on Themeforest!

Always happy to help you 🙂

[sharmstr]

This seems to work https://wordpress.org/plugins/lazy-load-for-videos/screenshots/

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

This support site is not about custom work. If you need custom development please contact cornel@seventhqueen.com

[ghodson]

Tried that already, didn’t work.
I think it might have something to do with being src rather than data-src. It’s not just YouTube either. I am also embedding Soundcloud and using video option in Post to be able to show image.

[Andrei]

Can you please leave us an url to the page of your site where you’re trying to achieve this ?

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

This reply has been set as private.

[Andrei]

Hi @ghodson, in your case it is not about deferring any js, because those elements are iframes and you cannot block their load with a js script. This iframe “deferring” will involve modifying a lot of elements from our listing grids and isn’t something that can be provided as a small/quick fix.

I’ll rename your topic to reflect the right issue and move it to our feature requests voting system so that we can consider it for future implementation.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Is it not as simple as changing the html to eg. <iframe width=”560″ height=”315″ src=”” data-src=”//www.youtube.com/embed/OMOVFvcNfvE” frameborder=”0″ allowfullscreen></iframe>

Removing src=”” and replacing with data-src=””

and then adding the script to the bottom of the page.

<script>
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;
</script>

I just need to know what tempaltes to modify?

[Andrei]

That won’t be as easy as that, a proper defer in this case would be to have a placeholder thumbnail with a proper media icon over it, and when you click the icon it would swap the image placeholder with the real iframe.

The method you posted it will only move all iframes to load after the DOM is ready, but it will still load all of them at once producing the same amounts of requests.

If you still want to proceed with your incomplete solution you will have to modify the “post-content-*” files from the “page-parts” folder.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

What would you recommend? My main concern is the site loading time which is around 13 secs. I need to get down to at least 6 secs.

[Andrei]

You could reduce the amount of items displayed in a page, or instead of using an embed in the posts listing you could only add a picture thumbnail and leave the embed just in the content of the post.

Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Does the thumbnail option require modification to template?

[Andrei]

No, just change the post format to standard.
Cheers

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[ghodson]

Thanks, this worked great. I took screenshots of what was there and just used them as thumbnails. I then made sure that I selected it not to show the feature image on the post page.

[Author]

Posts