Most of us use CodePen, a nice HTML/CSS/JS playground to create and share snippets. You have probably noticed that iFrame previews in search results suddenly stop working after 3 or 4 seconds.

I was curious how this works (as far as I knew this was not possible) and came up with a working solution.

You need to

• Disable animations
• Disable audio/video elements
• Wrap this up and set a timeout
• Inject it into every iFrame

Don't worry, it is pretty easy and straightforward.

Disable all CSS animations

The following will find and iterate through all the nodes rendered in the DOM. For each HTMLElement it will set the CSS properties to 'paused'.

function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

Disable audio/video

The following function will select all the elements of type type, iterate through them and simply call the pause() method.

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

Note: This will not stop Audio and Video elements not rendered in the DOM. This means if you create a new HTMLAudioElement then play it but don't append it to your document, it will keep playing. This is why some pens on CodePen in results still manage to make sound sometimes.

Wrapping it up

A simple function that does everything we just described.

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000) // execute after 4 seconds

Inject

Basically, on CodePen they inject the the following code in every iFrame of their search results. (the function names may differ but it is conceptually the same)

<script>
function disablewebkitAnimations() {
    var nodes = document.querySelectorAll('*')
    for (var i = 0; i < nodes.length; i++) {
        style = nodes[i].style
        style.webkitAnimationPlayState = 'paused'
        document.body.className = 'paused'
    }
}

function pauseElementTypes(type) {
    let nodes = document.querySelectorAll(type)
    for (var i = 0, els = document.getElementsByTagName(type); i < els.length; i++) {
        els[i].pause();
    }
}

function iFrameDisable() {
    disablewebkitAnimations()
    pauseElementTypes("audio")
    pauseElementTypes("video")
}

setTimeout(iFrameDisable, 4000)
</script>

Additionally, you can extend this to also disable webkitGetUserMedia of the window navigator but I'll leave that up to you. (CodePen doesn't do this yet either)

I am Jochem Stoel. If this post was useful to you or you have something to say then I invite you to leave a response or look at some of my other content.