How do I set this up so that the iframe doesn't load until the object is clicked on?

HTML & CSS
11

You can change the content of an iframe via <a> links with a target attribute with a value matching the name attribute of the frame.
So the iframe has a name:-

<iframe src="placeholder.jpg" name="frame" height="266" width="266" class="window"></iframe>

And the link to switch content has the iframe as target and the new content as its href:-

<a href="frame-content.mp4" target="frame">Load Content</a>

The iframe will initially show the placeholder image. When the link is clicked it will show the frame-content media.

2 Likes