To set up the aspect ratio helper utility in TailwindCSS you have to install the official plugin.
# Using npm npm install @tailwindcss/aspect-ratio # Using Yarn yarn add @tailwindcss/aspect-ratio
Then update the config file to require the plugin.
// tailwind.config.js
module.exports = {
plugins: [
require('@tailwindcss/aspect-ratio'),
],
}Now you can make use of the class to wrap up the iframe of the video that you are embedding.
<div class="aspect-w-16 aspect-h-9"> <iframe src="#" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe> </div>
