Tail Template

‐ handcrafted Tailwind CSS templates for your next project

How To Embed Responsive Youtube Videos With Tailwind Css

By TailTemplate Team

How to Embed Responsive YouTube Videos With Tailwind CSS


If you're looking for a fast and easy way to embed responsive YouTube Videos on your website, you have come to the right place. We'll walk you through the process step-by-step.

The first step in creating a responsive YouTube video is to add the 'aspect-ratio' CSS property. This utility is designed to remove the wrapper height from the end result.

Install the plugin from npm:

npm install -D @tailwindcss/aspect-ratio

Then add the plugin to your tailwind.config.js file, and disable the aspectRatio core plugin to avoid conflicts with the native aspect-ratio utilities included in Tailwind CSS v3.0:

// tailwind.config.js
module.exports = {
  theme: {
    // ...
  corePlugins: {
    aspectRatio: false,
  plugins: [
    // ...

Combine the aspect-w-{n} and aspect-h-{n} classes to specify the aspect ratio for an element:

A project by  StaticMaker. Twitter

This site is proudly powered by Tailwind CSS and Laravel Livewire