TrewWinCSSによる埋め込まれたYouTubeビデオへの応答設計の追加
1068 ワード
YouTubeは、自動的にサイズを変更し、スケールを提供していません.ここでは、Tarwindを使用してこれを実現する手順を示します.
1 -プラグイン
Sizing Images and Videos with Aspect Ratios with Tailwind CSS(YouTubeへのリンク)
@tailwindcss/aspect-ratio(NPMへのリンク)
1 -プラグイン
@tailwindcss/aspect-ratioをインストールしますnpm i @tailwindcss/aspect-ratio
// tailwind.config.js
plugins: [require("@tailwindcss/aspect-ratio")],
<div class="aspect-w-16 aspect-h-9">
<iframe src="https://youtu.be/NX_NW6bt6_s" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Sizing Images and Videos with Aspect Ratios with Tailwind CSS(YouTubeへのリンク)
@tailwindcss/aspect-ratio(NPMへのリンク)
Reference
この問題について(TrewWinCSSによる埋め込まれたYouTubeビデオへの応答設計の追加), 我々は、より多くの情報をここで見つけました https://dev.to/manuelalferez/adding-responsive-design-to-embedded-youtube-videos-with-tailwindcss-2ipcテキストは自由に共有またはコピーできます。ただし、このドキュメントのURLは参考URLとして残しておいてください。
Collection and Share based on the CC Protocol