마이크로CMS에서 출력된 iframe을 스펀지로 처리한 사연입니다.

안녕하세요. ebii입니다.
며칠 전, Nuxt.js+마이크로CMS+Netlify로 블로그를 만들었습니다.
스케줄러:별거 아니지만여기.
그때 마이크로CMS로 묻어둔 아이프람이 스마트폰 화면을 넘어서는 문제에 부딪혔기 때문에 어떻게 해결됐는지 정리해보자.

문제점

마이크로CMS에서 리치 편집기에 iframe을 포함하면 다음 형식으로 출력됩니다.
유튜브

<iframe width=\"480\" height=\"270\" src=\"https://www.youtube.com/embed/41Ia291KIvI?feature=oembed\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen></iframe>

( 참고 문장 )
대개 직접 지정width과height는 좋지 않을 것 같습니다.
그럼, 왜요?

해결편

아래의 기사는 참고가 되었다.

서버에서 구문 강조 - microcMOS

이 글에서 나는 cheerio 마이크로CMS에서 얻은 HTML를 가지고 논다.
나는 이것과 같은 것을 iframe에 적용했으면 좋겠다고 생각했다.스케줄러:좀 무리하지만...
또한 다음과 같이 asyncData가 수정되었습니다.

async asyncData ({ params, $config, error }) {
    try {
      const { data } = await axios.get(
        $config.apiBaseUrl + `/api/v1/blog/${params.slug}`,
        {
          headers: { 'X-API-KEY': $config.apiKey }
        }
      )
      const $ = cheerio.load(data.body)
      $('pre code').each((_, elm) => {
        const result = hljs.highlightAuto($(elm).text())
        $(elm).html(result.value)
        $(elm).addClass('hljs')
      })
      $('iframe').each((_, elm) => {
        const wrapDiv =
          $('<div style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.25%;"></div>')
        $(elm).wrap(wrapDiv)
        $(elm).attr('width', null)
          .attr('height', null)
          .attr('style', 'border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;')
      })
      return {
        ...data,
        body: $.html()
      }
    } catch (err) {
      error({
        statusCode: err.response.status
      })
    }
  }

보고 싶은 부분$('iframe').each((_, elm) => {...}) 입니다.
하는 일은 아래와 같다.

iframe 라벨을 획득한 부분

div 라벨로 iframe

포위

ifram 탭에 정의된 width, height

삭제

iframe 탭에 스타일 추가

이렇게 하면 순조롭다.
div, iframe 태그에 추가된 스타일은 주문처럼 나도 완전히 이해하지 못했어...
다만, div 라벨의 스타일에 쓰인padding-bottom의 수치는 상당히 중요하다.
유튜브의 화면 비율을 16:9로 고정하는 값이기 때문에 여기서는 반드시 이 수치를 먼저 설정해야 한다.
(즉, 다른 비율로 변경하려면 여기를 만져야 한다.)
이렇게 하면 유튜브가 안전하게 뜬다!
참고가 됐으면 좋겠어요.