Add Delay Before iFrame Start

Thank you!

It should be possible to add a few second delay before the iframe starts to load – but the issue with that could be since it’s a fullpage, it’d be a blank page for a time. With that said:

If you want it to apply to all iframed pages, you can go to Content Mask > Scripts & Styles in the menu. (Just be sure to put the code in the iframe method boxes, not the download method ones!)

If you want it to apply to just one, you can edit the page/post and add it to the header/footer scripts metabox below the editor.

In the Header Scripts box, you can add some code to set the frame’s opacity to 0, and perhaps give it a nice transition:

<style>
	#content-mask-frame {
		opacity: 0;
		transition: .5s all ease-out;
	}
</style>

Then in the Footer Scripts box, you can do a simple setTimeout function to show the content after your defined delay:

<script>
	var contentMaskFrame = document.querySelector('#content-mask-frame');
	var seconds = 3.5;

	setTimeout(function(){
		contentMaskFrame.style.opacity = 1;
	}, 1000 * seconds );
</script>

You can see an example of that working on this page here: https://xhynk.com/content-mask/beep-bop/ where it is hidden but shows up in 3.5 seconds.

Regarding the content_mask_iframe_footer hook, that’s just a standard action hook that you can execute PHP Code on. Mostly used to insert tracking codes or “overlayed content”, using WordPress’s add_action function. An example would look like, going into your theme’s functions.php file and adding:

add_action( 'content_mask_iframe_footer', 'some_custom_function' );
function some_custom_function(){
	if( is_page( 'my-page' ) ){
		echo 'Something to output here';
	}
}

That will output the text “Something to output here” at the bottom of every single content-mask iframe. Useful for tracking codes, javascript, adding buttons/overlays to the page, etc.

Hope that helps!