# 在 staging aotter 放 scroller creative 的方式

應該不會用到了，當備份文件　

根據不同網址，呈現不同的 creative 內容與版型

// 1: 用 if 判斷網址路徑，決定這個網址要執行哪種 creative 語法
if (window.location.href === 'https://staging-agirls.aotter.net/post/54881') {
  // 2: 新增一個能放 creative 的 div 元素
  var targetDom = document.querySelector('.note') || document.querySelectorAll('.col-12.max-w-full')[1]
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforebegin', newCreative)
  console.log('滿版，jpge圖、TY、影片 loading')
  
  // 3: 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
}

// 4: 1、2、3 再來一次

## 05.24

console.log('2024/05/16 16:55')
// BitoPro 首頁。滿版，png 圖、影片、gif
if (window.location.href === 'https://staging-agirls.aotter.net/') {
  // 新增一個能放 creative 的 div 元素
console.log('2024/05/16 18:45')


  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('.note') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforebegin', newCreative)
  console.log('BitoPro滿版，png 圖、影片、gif loading 0000')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px)
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://static.ottercdn.com/trek/media/490bcd94-2a63-4490-847f-38ab00ae9530.png"
                alt="">
                <video
                id="ad-video"
                controls
                playsinline
                muted
                loop
                autoplay
                preload="auto"
              >
                <source
                  src="https://tkvideo.aottercdn.com/dfe1d3f7-70fe-439b-99f6-45f0394e29d5/454bb559-36eb-427c-98d6-855ea0884338.mp4"
                  type="video/mp4"/>
              </video>
              <img
              src="https://static.aottercdn.com/trek/media/b94d5926-92f3-477e-a82f-60bc9d0ecdca.gif"
              alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      console.log('play!')
      adVideoElement.play()
    } else {
      console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
 }
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}

// BitoPro post/54881。fixed，png 圖、影片、gif
if (window.location.href === 'https://staging-agirls.aotter.net/post/54881') {
  // 新增一個能放 creative 的 div 元素
console.log('0516 1845')


  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('BitoProfixed，png 圖、影片、gif loading 0001')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 480px;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 320px;
        height: 480px;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://static.ottercdn.com/trek/media/490bcd94-2a63-4490-847f-38ab00ae9530.png"
                alt="">
                <video
                id="ad-video"
                controls
                playsinline
                muted
                loop
                autoplay
                preload="auto"
              >
                <source
                  src="https://tkvideo.aottercdn.com/dfe1d3f7-70fe-439b-99f6-45f0394e29d5/454bb559-36eb-427c-98d6-855ea0884338.mp4"
                  type="video/mp4"/>
              </video>
              <img
              src="https://static.aottercdn.com/trek/media/b94d5926-92f3-477e-a82f-60bc9d0ecdca.gif"
              alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}



// jkopay post/54882。滿版，png 圖、gif、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/54882') {
  // 新增一個能放 creative 的 div 元素
console.log('0516 1845')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('jkopay滿版，png 圖、gif、jpeg 圖 loading 0002')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px)
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://upload.wikimedia.org/wikipedia/zh/thumb/5/5a/JKOPAY_logo.svg/1200px-JKOPAY_logo.svg.png"
                alt="">
              <img
                src="https://static.aottercdn.com/trek/media/a1235810-1571-4e2c-8ad5-b4954d6885ea.gif"
                alt="">
              <img
                src="https://d3gjxtgqyywct8.cloudfront.net/o2o/image/cef0b5f0-5e76-432c-8eab-ba4130574901.jpg"
                alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}




// jkopay post/54883。fixed，png 圖、gif、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/54883') {
  // 新增一個能放 creative 的 div 元素
  console.log('0516 18:45')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('jkopayfixed，png 圖、gif、jpeg 圖 loading 0003')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('hello world')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 480px;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 320px;
        height: 480px;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/58849cca-96e7-47a8-9c92-7966305871e1.png"
      alt="">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://upload.wikimedia.org/wikipedia/zh/thumb/5/5a/JKOPAY_logo.svg/1200px-JKOPAY_logo.svg.png"
                alt="">
              <img
                src="https://static.aottercdn.com/trek/media/a1235810-1571-4e2c-8ad5-b4954d6885ea.gif"
                alt="">
              <img
                src="https://d3gjxtgqyywct8.cloudfront.net/o2o/image/cef0b5f0-5e76-432c-8eab-ba4130574901.jpg"
                alt="">
            </div>
          </div>
        </div>
      </div>
      <div>      
      <img
      src="https://static.ottercdn.com/trek/media/b0b3405d-7b25-4fab-924e-45fbd08e8d5f.png"
      alt="">
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}



// metaverselife post/54884。滿版，png 圖、影音、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/54884') {
  // 新增一個能放 creative 的 div 元素
  console.log('0516 18:45')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('metaverselife滿版，png 圖、影音、jpeg 圖 loading 0004')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px)
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://images1.iwplay.com.tw/image/p5x/main/image/metaverse/title.png"
                alt="">
              <video
                id="ad-video"
                controls
                playsinline
                muted
                loop
                autoplay
                preload="auto"
              >
                <source
                  src="https://tkvideo.aottercdn.com/dded2bfa-473f-4d87-b79e-6767feab25bd/37176972-df92-4713-b249-f63b50dd97a7.mp4"
                  type="video/mp4"/>
              </video>
              <img
              src="https://p2.bahamut.com.tw/B/2KU/63/9a054404ff4311f4d25fc4be2a1mrpn5.JPG?v=1691466933044"
              alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}




// metaverselife post/54885。fixed，png 圖、影音、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/54885') {
  // 新增一個能放 creative 的 div 元素
  console.log('0516 18:45')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('metaverselifefixed，png 圖、影音、jpeg 圖 loading 0005')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 480px;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 320px;
        height: 480px;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://images1.iwplay.com.tw/image/p5x/main/image/metaverse/title.png"
                alt="">
              <video
                id="ad-video"
                controls
                playsinline
                muted
                loop
                autoplay
                preload="auto"
              >
                <source
                  src="https://tkvideo.aottercdn.com/dded2bfa-473f-4d87-b79e-6767feab25bd/37176972-df92-4713-b249-f63b50dd97a7.mp4"
                  type="video/mp4"/>
              </video>
              <img
              src="https://p2.bahamut.com.tw/B/2KU/63/9a054404ff4311f4d25fc4be2a1mrpn5.JPG?v=1691466933044"
              alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}





// Singleton post/54886 圖、影音、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/54886') {
  // 新增一個能放 creative 的 div 元素
console.log('2024/05/16 17:54')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('Singleton滿版，png 圖、影音、jpeg 圖 loading 54886')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px)
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
        <div>              
        <div>              
        <img
        src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
        alt=""
        style="max-width: 100%; height: auto;">
        </div>
          <div id="ad-view">
            <div id="ad-wrap">
              <div id="ad-content-wrap">
                <div id="ad-content" style="">
                  <img
                  src="https://static.ottercdn.com/trek/media/cc135cba-3116-4b5e-bb3e-ba39d9bf442a.png"
                  alt="">
                  <video
                    id="ad-video"
                    controls
                    playsinline
                    muted
                    loop
                    autoplay
                    preload="auto"
                  >
                    <source
                      src="https://tkvideo.aottercdn.com/8012a173-3cbc-4157-afbb-f1668f074e63/295331d8-8e9e-45a7-924b-cd0efb03dafb.mp4"
                      type="video/mp4"/>
                  </video>
                  <img
                  src="https://static.ottercdn.com/trek/media/bb78f821-2f99-484e-ab3d-e56e9e915279.jpg"
                  alt="">
                </div>
              </div>
            </div>
          </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}





// Singleton post/56749。fixed，png 圖、影音、jpeg 圖
if (window.location.href === 'https://staging-agirls.aotter.net/post/56749') {
  // 新增一個能放 creative 的 div 元素
  console.log('0516 18:45')

  if (document.body.clientWidth < 768) {

  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('Singletonfixed，png 圖、影音、jpeg 圖 loading 56749')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
}

function loadCreative() {
  console.log('loadCreative start')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 480px;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: 320px;
        height: 480px;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
      <div>              
      <img
      src="https://static.ottercdn.com/trek/media/9e1232bd-79b1-4b48-b936-94749216ec57.png"
      alt=""
      style="max-width: 100%; height: auto;">
      </div>
      <div id="ad-view">
        <div id="ad-wrap">
          <div id="ad-content-wrap">
            <div id="ad-content" style="">
              <img
                src="https://static.ottercdn.com/trek/media/cc135cba-3116-4b5e-bb3e-ba39d9bf442a.png"
                alt="">
              <video
                id="ad-video"
                controls
                playsinline
                muted
                loop
                autoplay
                preload="auto"
              >
                <source
                  src="https://tkvideo.aottercdn.com/8012a173-3cbc-4157-afbb-f1668f074e63/295331d8-8e9e-45a7-924b-cd0efb03dafb.mp4"
                  type="video/mp4"/>
              </video>
              <img
              src="https://static.ottercdn.com/trek/media/bb78f821-2f99-484e-ab3d-e56e9e915279.jpg"
              alt="">
            </div>
          </div>
        </div>
      </div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    // console.log('timeupdate', event)
    // console.log('adVideoElement duration', adVideoElement.duration)
    // console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}
} else {
    console.log('糟糕！視窗寬度要大於等於 768，scroller 無法顯示')
  }
}


// John 貼的測試網址參數 code
// Singleton post/54886 jpeg、iframe、影音
// 1: 用 if 判斷網址路徑，決定這個網址要執行哪種 creative 語法
if (window.location.href.includes('https://staging-agirls.aotter.net/post/54508')) {
  console.log('0516 19:28')
  window.addEventListener('resize', () => console.log('resize'))
  // 2: 新增一個能放 creative 的 div 元素
  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('Singleton滿版，jpeg, iframe, video loading 54508')

  // 3: 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
  if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
  // setTimeout(adjustSize, 100)
} else {
  document.addEventListener('DOMContentLoaded', loadCreative)
  // document.addEventListener('DOMContentLoaded', () => setTimeout(adjustSize, 100))
}

function adjustSize(defaultQueryString) {
  // 取得網址參數
  const queryString = defaultQueryString || window.location.search
  const urlParams = new URLSearchParams(queryString)
  console.log('queryString', queryString)

  // outer - adView 尺寸
  var viewElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-view')
  urlParams.get('outer-height') ? (viewElement.style.height = urlParams.get('outer-height')) : ''
  urlParams.get('outer-width') ? (viewElement.style.width = urlParams.get('outer-width')) : ''
  urlParams.get('outer-width') ? (viewElement.style.margin = '0 auto') : ''

  // inner - adContentWrap 尺寸
  var wrapElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-content-wrap')
  urlParams.get('inner-height') ? (wrapElement.style.height = urlParams.get('inner-height')) : ''
  urlParams.get('inner-height') ? (wrapElement.style.overflow = 'hidden') : ''
  urlParams.get('inner-width') ? (wrapElement.style.width = urlParams.get('inner-width')) : ''
}

function loadCreative() {
  console.log('hello world')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
        <div>SPONSORED CONTENT</div>
          <div id="ad-view">
            <div id="ad-wrap">
              <div id="ad-content-wrap">
                <div id="ad-content" style="">
                  <img
                    src="https://placehold.co/600x200/EEE/31343C.png"
                    alt="">
                  <iframe style="aspect-ratio: 16 / 9;"
                    style="display: none;"
                    src="https://www.youtube.com/embed/WTuExQVdRmg?si=9Yb5u-2eIhwcjAPI&amp;controls=0"
                    frameborder="0"
                    autoplay="1"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen>
                  </iframe>
                  <video
                    id="ad-video"
                    controls
                    playsinline
                    muted
                    loop
                    autoplay
                    preload="auto"
                  >
                    <source
                      src="https://tkvideo.aottercdn.com/39a9f30a-827a-42e7-90e3-7ce38e72b59d/d32871e4-5b1d-47c0-9e54-98a9d58d334e.mp4"
                      type="video/mp4"/>
                  </video>
                </div>
              </div>
            </div>
          </div>
        <div>ADS BY Aseal</div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  adjustSize()
  const queryString = window.location.search
  window.addEventListener('resize', () => setAdMargin() && adjustSize(queryString))

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      // console.log('play!')
      adVideoElement.play()
    } else {
      // console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  // const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  // adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
  //   console.log('timeupdate', event)
  //   console.log('adVideoElement duration', adVideoElement.duration)
  //   console.log('adVideoElement currentTime', adVideoElement.currentTime)
  // })
}
}

## 05.16 網址參數

預設滿版
- https://staging-agirls.aotter.net/post/54508

加上網址參數調整外框、內框固定尺寸
- https://staging-agirls.aotter.net/post/54508?outer-width=320px&outer-height=480px&inner-width=320px&inner-height=480px

// John 貼的測試網址參數 code
// Singleton post/54886 jpeg、iframe、影音
// 1: 用 if 判斷網址路徑，決定這個網址要執行哪種 creative 語法
if (window.location.href.includes('https://staging-agirls.aotter.net/post/54508')) {
  console.log('0516 19.02')
  // 2: 新增一個能放 creative 的 div 元素
  var targetDom = document.querySelector('article') || document.querySelectorAll('.col-12.max-w-full')[1]
  console.log('選擇的目標元素為：', targetDom)
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforeend', newCreative)
  console.log('Singleton滿版，jpeg, iframe, video loading 54508')

  // 3: 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
  if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
    loadCreative()
    setTimeout(adjustSize, 3000)
  } else {
    document.addEventListener('DOMContentLoaded', loadCreative)
    document.addEventListener('DOMContentLoaded', () => setTimeout(adjustSize, 1000))
  }

  function adjustSize() {
    // 取得網址參數
    const queryString = window.location.search
    const urlParams = new URLSearchParams(queryString)

    // outer - adView 尺寸
    var viewElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-view')
    urlParams.get('outer-height') ? (viewElement.style.height = urlParams.get('outer-height')) : ''
    urlParams.get('outer-width') ? (viewElement.style.width = urlParams.get('outer-width')) : ''
    urlParams.get('outer-width') ? (viewElement.style.margin = '0 auto') : ''

    // inner - adContentWrap 尺寸
    var wrapElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-content-wrap')
    urlParams.get('inner-height') ? (wrapElement.style.height = urlParams.get('inner-height')) : ''
    urlParams.get('inner-height') ? (wrapElement.style.overflow = 'hidden') : ''
    urlParams.get('inner-width') ? (wrapElement.style.width = urlParams.get('inner-width')) : ''
  }

  function loadCreative() {
    console.log('loadCreative')

    const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px);
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
        <div>SPONSORED CONTENT</div>
          <div id="ad-view">
            <div id="ad-wrap">
              <div id="ad-content-wrap">
                <div id="ad-content" style="">
                  <img
                    src="https://placehold.co/600x200/EEE/31343C.png"
                    alt="">
                  <iframe style="aspect-ratio: 16 / 9;"
                    style="display: none;"
                    src="https://www.youtube.com/embed/WTuExQVdRmg?si=9Yb5u-2eIhwcjAPI&amp;controls=0"
                    frameborder="0"
                    autoplay="1"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen>
                  </iframe>
                  <video
                    id="ad-video"
                    controls
                    playsinline
                    muted
                    loop
                    autoplay
                    preload="auto"
                  >
                    <source
                      src="https://tkvideo.aottercdn.com/39a9f30a-827a-42e7-90e3-7ce38e72b59d/d32871e4-5b1d-47c0-9e54-98a9d58d334e.mp4"
                      type="video/mp4"/>
                  </video>
                </div>
              </div>
            </div>
          </div>
        <div>ADS BY Aseal</div>
      </a>
    </div>
  `

    const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
    adElement.innerHTML = template

    // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
    function setAdMargin() {
      const windowWidth = window.innerWidth
      const elementWidth = adElement.clientWidth
      const diff = windowWidth - elementWidth

      // 避免 ios Safari 滾動時出現閃爍
      if (windowWidth === elementWidth) {
        return
      }
      // 避免桌機大螢幕的提示文字被截斷
      if (elementWidth >= 540) {
        adElement.style.margin = `0 0`
        return
      }

      adElement.style.margin = `0 -${diff / 2}px`
    }
    setAdMargin()
    window.addEventListener('resize', setAdMargin)

    // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
    const option = {
      threshold: [0.2, 0.8]
    }

    function callback(payload) {
      const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
      // console.log('payload[0]', payload[0])

      if (payload[0].isIntersecting) {
        // console.log('play!')
        adVideoElement.play()
      } else {
        // console.log('pause')
        adVideoElement.pause()
      }
    }
    var io = new IntersectionObserver(callback, option)
    io.observe(adElement)

    // 紀錄播放進度
    // const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    // adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    //   console.log('timeupdate', event)
    //   console.log('adVideoElement duration', adVideoElement.duration)
    //   console.log('adVideoElement currentTime', adVideoElement.currentTime)
    // })
  }

}

## 參考用 05.14

// 滿版，jpge圖、TY、影片
if (window.location.href === 'https://staging-agirls.aotter.net/post/54881') {
  // 新增一個能放 creative 的 div 元素
  var targetDom = document.querySelector('.note') || document.querySelectorAll('.col-12.max-w-full')[1]
  var newCreative = document.createElement("div")
  newCreative.id = 'trek-ad-bg-attachment-fixed'
  targetDom.insertAdjacentElement('beforebegin', newCreative)
  console.log('滿版，jpge圖、TY、影片 loading')

  // 目前暫定塞 creative 的方式。就是 trek-ad-preview 裡面的 demo.js
  if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
    loadCreative()
  } else {
    document.addEventListener('DOMContentLoaded', () => {
      setTimeout(loadCreative, 3000)
    })
  }

  function loadCreative() {
    console.log('hello world 0515 1129')

    const template = /*html*/ `
      <style>
        html, body {
          padding: 0;
          margin: 0;
        }

        #trek-ad-bg-attachment-fixed {
          margin: 0 0px;
        }

        #trek-ad-bg-attachment-fixed #ad-view {
          display: block;
          width: 100%;
          height: 100vh;
          padding: 0px;
          position: relative;
          z-index: 1;
          overflow: hidden;
        }

        #trek-ad-bg-attachment-fixed #ad-wrap {
          width: 100%;
          height: 100%;
          position: absolute;
          top: 0;
          left: 0;
          clip-path: inset(0 0 0 0);
          background: inherit;
        }

        #trek-ad-bg-attachment-fixed #ad-content-wrap {
          position: fixed; 
          top: 50%; 
          left: 50%; 
          transform: translate(-50%, -50%); 
          width: min(100vw, 540px)
        }

        #trek-ad-bg-attachment-fixed #ad-content {
          text-align: center;
        }

        #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
          vertical-align: bottom;
          width: 100%;
        }
      </style>

      <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
        <a href="https://aotter.net" target="blank" style="text-decoration:none">
          <div>SPONSORED CONTENT</div>
            <div id="ad-view">
              <div id="ad-wrap">
                <div id="ad-content-wrap">
                  <div id="ad-content" style="">
                    <img
                      src="https://placehold.co/600x200/EEE/31343C.png"
                      alt="">
                    <iframe style="aspect-ratio: 16 / 9;"
                      src="https://www.youtube.com/embed/WTuExQVdRmg?si=9Yb5u-2eIhwcjAPI&amp;controls=0"
                      frameborder="0"
                      allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                      referrerpolicy="strict-origin-when-cross-origin"
                      allowfullscreen>
                    </iframe>
                    <video
                      id="ad-video"
                      controls
                      playsinline
                      muted
                      loop
                      autoplay
                      preload="auto"
                    >
                      <source
                        src="https://tkvideo.aottercdn.com/39a9f30a-827a-42e7-90e3-7ce38e72b59d/d32871e4-5b1d-47c0-9e54-98a9d58d334e.mp4"
                        type="video/mp4"/>
                    </video>
                  </div>
                </div>
              </div>
            </div>
          <div>ADS BY Aseal</div>
        </a>
      </div>
    `

    const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
    adElement.innerHTML = template

    // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
    function setAdMargin() {
      const windowWidth = window.innerWidth
      const elementWidth = adElement.clientWidth
      const diff = windowWidth - elementWidth

      // 避免 ios Safari 滾動時出現閃爍
      if (windowWidth === elementWidth) {
        return
      }
      // 避免桌機大螢幕的提示文字被截斷
      if (elementWidth >= 540) {
        adElement.style.margin = `0 0`
        return
      }

      adElement.style.margin = `0 -${diff / 2}px`
    }
    setAdMargin()
    window.addEventListener('resize', setAdMargin)

    // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
    const option = {
      threshold: [0.2, 0.8]
    }
    function callback(payload) {
      const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
      console.log('payload[0]', payload[0])

      if (payload[0].isIntersecting) {
        console.log('play!')
        adVideoElement.play()
      } else {
        console.log('pause')
        adVideoElement.pause()
      }
    }
    var io = new IntersectionObserver(callback, option)
    io.observe(adElement)

    // 紀錄播放進度
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
      console.log('timeupdate', event)
      console.log('adVideoElement duration', adVideoElement.duration)
      console.log('adVideoElement currentTime', adVideoElement.currentTime)
    })
  }

}

# 之前全站通用的語法 05.14

// 新增一個能放廣告的 div 元素
var targetDom = document.querySelector('.note') || document.querySelectorAll('.col-12.max-w-full')[1]
var newCreative = document.createElement("div")
newCreative.id = 'trek-ad-bg-attachment-fixed'
targetDom.insertAdjacentElement('beforebegin', newCreative)
console.log('b8 tm.js loading')

// 目前暫定塞 creative 的方式
if (document.querySelector('#trek-ad-bg-attachment-fixed')) {
  loadCreative()
} else {
  document.addEventListener('DOMContentLoaded', () => {
    setTimeout(loadCreative, 3000)
  })
}

function loadCreative() {
  console.log('hello world 0515 1110')

  const template = /*html*/ `
    <style>
      html, body {
        padding: 0;
        margin: 0;
      }

      #trek-ad-bg-attachment-fixed {
        margin: 0 0px;
      }

      #trek-ad-bg-attachment-fixed #ad-view {
        display: block;
        width: 100%;
        height: 100vh;
        padding: 0px;
        position: relative;
        z-index: 1;
        overflow: hidden;
      }

      #trek-ad-bg-attachment-fixed #ad-wrap {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        clip-path: inset(0 0 0 0);
        background: inherit;
      }

      #trek-ad-bg-attachment-fixed #ad-content-wrap {
        position: fixed; 
        top: 50%; 
        left: 50%; 
        transform: translate(-50%, -50%); 
        width: min(100vw, 540px)
      }

      #trek-ad-bg-attachment-fixed #ad-content {
        text-align: center;
      }

      #trek-ad-bg-attachment-fixed #ad-content > img, iframe, video {
        vertical-align: bottom;
        width: 100%;
      }
    </style>

    <div style="position:relative; margin-bottom: 10px; width: 100%; overflow:hidden;">
      <a href="https://aotter.net" target="blank" style="text-decoration:none">
        <div>SPONSORED CONTENT</div>
          <div id="ad-view">
            <div id="ad-wrap">
              <div id="ad-content-wrap">
                <div id="ad-content" style="">
                  <img
                    src="https://placehold.co/600x200/EEE/31343C.png"
                    alt="">
                  <iframe style="aspect-ratio: 16 / 9;"
                    src="https://www.youtube.com/embed/WTuExQVdRmg?si=9Yb5u-2eIhwcjAPI&amp;controls=0"
                    frameborder="0"
                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
                    referrerpolicy="strict-origin-when-cross-origin"
                    allowfullscreen>
                  </iframe>
                  <video
                    id="ad-video"
                    controls
                    playsinline
                    muted
                    loop
                    autoplay
                    preload="auto"
                  >
                    <source
                      src="https://tkvideo.aottercdn.com/39a9f30a-827a-42e7-90e3-7ce38e72b59d/d32871e4-5b1d-47c0-9e54-98a9d58d334e.mp4"
                      type="video/mp4"/>
                  </video>
                </div>
              </div>
            </div>
          </div>
        <div>ADS BY Aseal</div>
      </a>
    </div>
  `

  const adElement = document.querySelector('#trek-ad-bg-attachment-fixed')
  adElement.innerHTML = template

  // 讓 ad content 可以破版，超出父層寬度，跟螢幕寬度同寬
  function setAdMargin() {
    const windowWidth = window.innerWidth
    const elementWidth = adElement.clientWidth
    const diff = windowWidth - elementWidth

    // 避免 ios Safari 滾動時出現閃爍
    if (windowWidth === elementWidth) {
      return
    }
    // 避免桌機大螢幕的提示文字被截斷
    if (elementWidth >= 540) {
      adElement.style.margin = `0 0`
      return
    }

    adElement.style.margin = `0 -${diff / 2}px`
  }
  setAdMargin()
  window.addEventListener('resize', setAdMargin)

  // AD 出現在 viewport 時，才開始播放影片；如果不在 viewport，則暫停播放
  const option = {
    threshold: [0.2, 0.8]
  }
  function callback(payload) {
    const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
    console.log('payload[0]', payload[0])

    if (payload[0].isIntersecting) {
      console.log('play!')
      adVideoElement.play()
    } else {
      console.log('pause')
      adVideoElement.pause()
    }
  }
  var io = new IntersectionObserver(callback, option)
  io.observe(adElement)

  // 紀錄播放進度
  const adVideoElement = document.querySelector('#trek-ad-bg-attachment-fixed #ad-video')
  adVideoElement.addEventListener('timeupdate', function getPercentage(event) {
    console.log('timeupdate', event)
    console.log('adVideoElement duration', adVideoElement.duration)
    console.log('adVideoElement currentTime', adVideoElement.currentTime)
  })
}