How to disable iFrames after a few seconds like they do on codePen.
Tags: tutorial, codepen, disable, iframe
Published: 2018-01-17 23:28:51

---
title: How to disable iFrames after a few seconds like they do on codePen.
published: true
description: In this article I explain how they disable animation and sound in iFrame 'previews' on CodePen after a few seconds.
tags: tutorial, codepen, disable, iframe
cover_image: https://thepracticaldev.s3.amazonaws.com/i/dcs3u5ld8qi54dfw0qp3.png
---

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](https://codepen.io/search/pens?q=animation&limit=all&type=type-pens) 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'.

```js
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.

```js
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.

```js
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)

```html
<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.