HTML / CSS

【Tailwind】動画サムネイルを表示する

ふぐ

Tailwindを使用しているプロジェクトにて、
動画のサムネイルを表示してみた

プラグインをインストール

npm install @tailwindcss/aspect-ratio@latest --save-dev

プラグインを読み込むように設定ファイル変更

  • tailwind.config.js
module.exports = {
  theme: {
    // ...
  },
  plugins: [
    require('@tailwindcss/aspect-ratio'), // ⭐️ 追加
    // ...
  ],
}

使ってみる

<div class="aspect-w-16 aspect-h-9">
  <iframe src="{動画URLを入れる}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
  • aspect-w-*とaspect-h-*でサムネイルの横幅、縦幅が指定できる (1~16まで)

\ 案件のご依頼・ご相談はこちらから /