microCMSのYouTube埋め込みの横幅を100%に変更する 📝

f:id:kimizuka:20210818163900p:plain

microCMSのリッチエディタですが、下記サービスの埋め込みに対応しています。

YouTube（https://www.youtube.com/）
Vimeo (https://vimeo.com/)
Twitter (http://www.twitter.com/)
Instagram (https://instagram.com)
Facebook (https://www.facebook.com/)
TikTok (http://www.tiktok.com/)
Flickr (https://www.flickr.com/)
Reddit (https://reddit.com/)
Tumblr (https://www.tumblr.com)
SoundCloud (http://soundcloud.com/)
SpeakerDeck (https://speakerdeck.com)
SlideShare (https://www.slideshare.net/)
TED (https://www.ted.com)
Codepen (https://codepen.io)
CodeSandbox (https://codesandbox.io)

https://document.microcms.io/manual/how-to-use-richeditor#haf38f3d7f3より引用

document.microcms.io

先日、Youtubeを埋め込んだものをNuxt.jsに埋め込んでみたのですが、iframeのwidth、heightが固定値で入力されており、ちょいと不便でした。
横幅を100%に設定したかったので、色々調べてみたところ、

iframeにembedly-embedというクラスが振られているので、

<template>
  <main v-html="html" />
</template>
<script lang="ts">
  import { Component, Prop, Vue } from 'nuxt-property-decorator';

  @Component({})
  export default class ProductDetailPageTemplate extends Vue {
    @Prop({
      type: String,
      default: ''
    })
    html: string; // microCMSからリッチエディタの内容を受け取る
  }
</script>
<style lang="scss" scoped>
  main {
    /deep/ {
      .embedly-embed {
        width: 100%;
      }
    }
  }
</style>