Tell us what you are trying to do?
change any iframe youtube video to thumbnail image
Is there any documentation that you are following?
wp rocket have this function to change iframe youtube video to thumbnail image
Is there a similar example that we can see?
No
What is the link to your site?
etuisyen.my
Previously our website (etuisyen.my) are very slow (picture 1)
This is mainly due to 16.9MiB of JavaScript is parsed during initial page load, as shown in picture below (picture 2)
To resolve this issue , we install wp rocket and enable iframe image and video (picture 3)
The results in gtmetrix after enable is very good (picture 4)
However got issue:
1) Got Gap in View (etuisyen.my page) (Picture 5)
2) Next pagination not change to thumpnail instead still using video iframe(Picture 6)
Suggestion:
Please advise on how to directly change the iframe youtube to thumpnail inside the toolset , so that no need for us to switch on the wp rocket.
Unfortunately given that you are using an Iframe to display the youtube videos you won't be able to automatically generate a thumbnail unless there is some form of custom code involved.
The custom code will need to do the work of getting a thumbnail from the iframe. Secondly you can try using your view without the AJAX refresh so that it reloads the page entirely which should cause the pagination to work correctly with the plugin you've installed.
It seems the WP rocket plugin replaces the iframes using some form of Javascript. Unless there is a specific javascript function that can be ran manually to replace the iframes with thumbnails then I would recommend using the AJAX refresh for your view.
Disabling the AJAX refresh should allow your results to display properly when paginating.
Finally if you want the AJAX refresh you will need to get in touch with the WP Rocket team and ask them about a function that can manually trigger the replacing of iframes with thumbnail.
Mind if telling me how to do lazyload + ajax function.
As mentioned previously you are using the WP Rocket plugin to convert the iframes to thumbnails.
I suspect this uses Javascript on the initial page load. When you perform an AJAX action the content refreshes without reloading the page so the javascript isn't ran again.
In order to do this you will need to lazyload the function from the WP Rocket plugin that is responsible for this. We have callback functions for our AJAX action that you can add the WP Rocket function into but unless we know what the function is then we can't reinitialise it.
For the Pagination complete ajax action you will use.
jQuery( document ).on( 'js_event_wpv_pagination_completed', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.effect (string) The View AJAX pagination effect
* data.speed (integer) The View AJAX pagination speed in miliseconds
* data.layout (object) The jQuery object for the View layout wrapper
*/
/*WP ROCKET FUNCTION GOES HERE*/
});
and for the Search complete ajax action
jQuery( document ).on( 'js_event_wpv_parametric_search_results_updated', function( event, data ) {
/**
* data.view_unique_id (string) The View unique ID hash
* data.layout (object) The jQuery object for the View layout wrapper
*/
/*WP ROCKET FUNCTION GOES HERE*/
});
Once you know the function you can add it to both these Callback functions and then add it to your view's JS section.
