<iframe
  width="100%"
  height="166"
  frameborder="no"
  data-src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/404616957&amp;color=ff5500"
  data-thumb="https://i1.sndcdn.com/artworks-000307378947-7qdj6z-t500x500.jpg"
></iframe>

<iframe
  width="100%"
  height="480"
  frameborder="no"
  data-src="https://youtube-nocookie.com/embed/4m1EFMoRFvY?rel=0&autoplay=1"
  data-thumb="https://img.youtube.com/vi/4m1EFMoRFvY/0.jpg"
></iframe>

<iframe
  width="300"
  height="300"
  frameborder="no"
  data-src="https://embed.disqus.com/p/1bqy7os"
  style="width: 100%;"
></iframe>

<iframe
  width="320"
  height="265"
  frameborder="no"
  style="width: 100%;"
  data-src="//codepen.io/airnan/embed/WJBLpJ/?height=265&theme-id=0&default-tab=css,result&embed-version=2"
></iframe>

iframe {
  display: block;
  margin: 1em auto;
}

window.onload = () => {
  const getHostname = url => {
    const a = document.createElement('a')
    a.href = url
    return a.hostname
  }
  const fr = document.getElementsByTagName('iframe')
  
  for (let i = 0; i < fr.length; i++) {
    const frame = fr[i]
    const frWindow = fr[i].contentWindow
    const frDocument = frWindow.document
    const url = frame.getAttribute('data-src')
    const body = frDocument.body

    const blur = frDocument.createElement('div')
    blur.style = `
      background: url(${frame.getAttribute('data-thumb') || 'https://picsum.photos/' + (frame.getAttribute('width') || frame.getAttribute('height'))}) center center no-repeat;
      background-size: cover;
      filter: blur(3px);
      position: absolute;
      top: 0; bottom: 0; left: 0; right: 0;
    `
    const noticeWrapper = frDocument.createElement('div')
    noticeWrapper.style = `
      position: absolute;
      top: 50%; left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(255,255,255,.925);
      border-radius: 2px;
      box-shadow: 0 0 5px rgba(0,0,0,.5);
      padding: .5em 1em;
      width: 80%; max-width: 760px;
    `

    const noticeHeader = frDocument.createElement('h1')
    noticeHeader.style = `font-size: 20px`
    noticeHeader.innerHTML = `
      This content may load
      ${frame.getAttribute('data-service-provider-name') || getHostname(url)} cookies
    `

    const noticeInfo = frDocument.createElement('p')
    noticeInfo.innerHTML = `
      By accepting you will be accessing a service provided by a third-party
      external to ${window.location.hostname}
    `
    
        const noticeButton = frDocument.createElement('button')
    noticeButton.style = `
      display: block;
      float: right;
    `
    noticeButton.innerHTML = 'I understand and agree'
    noticeButton.onclick = () => frame.setAttribute('src', url)

    const noticeSecondary = frDocument.createElement('a')
    noticeSecondary.style = `
      clear: right;
      display: block;
      float: right;
      font-size: .75em;
    `
    noticeSecondary.href = url
    noticeSecondary.target = '_blank'
    noticeSecondary.rel = 'noopener'
    noticeSecondary.innerHTML = 'direct link'
    
    noticeWrapper.appendChild(noticeHeader)
    noticeWrapper.appendChild(noticeInfo)
    noticeWrapper.appendChild(noticeButton)
    noticeWrapper.appendChild(noticeSecondary)
    
    body.style = `font-family: Lato, sans-serif`
    body.appendChild(blur)
    body.appendChild(noticeWrapper)

  }
}