Responsive YouTube embeds with TailwindCSS

This is a continuation of Getting started with NuxtJS / Content module.

The coolest and most handy feature of Nuxt/Content is the ability to detect Vue components in a Markdown file and then activate them.

Vue components in markdown file

The above video shows how you can add a Vue component tag to a markdown file and then create the component in the components/global directory.

This by itself doesn't make for an exciting written tutorial. So, let's use this as a starting point and see how we can take the example Vue component, which is a YouTube video embed, a little further by making it responsive.

Add Tailwind aspect ratio and responsiveness packages

In our package.json file, we'll add a few new dependencies.

  "dependencies": {
    "tailwindcss-aspect-ratio": "^3.0.0"
  },
  "devDependencies": {
    "tailwindcss-responsive-embed": "^1.0.0"
  }

Then, to install, in the project's root directory, run the following terminal command.

yarn install

These packages will both help provide the correct aspect ratio for the YouTube videos as well as make the YouTube embed responsive with changes to browser window width.

Update tailwind.config.js file

Now, we'll need to include the plugins on the tailwind.config.js file.

module.exports = {
  theme: {
    aspectRatio: {
      none: 0,
      square: [1, 1],
      "16/9": [16, 9],
      "4/3": [4, 3],
      "21/9": [21, 9]
    },
    ...
  },
  variants: {
    aspectRatio: ['responsive'],
    extend: {},
  },
  plugins: [
    ...
    require("tailwindcss-aspect-ratio"),
    require("tailwindcss-responsive-embed"),
  ]
}

We also added the aspectRatio section and variants sections to our Tailwind config file.

Update YouTube component

We have the YouTube.vue component created under the global folder.

If you plan to add Vue component tags to your markdown file, then Nuxt/Content will expect the corresponding components to be defined within the global directory.

To make the YouTube video responsive, we'll add appropriate classes.

<div class="embed-responsive aspect-ratio-16/9">
    <iframe class="embed-responsive-item" :src="`https://www.youtube.com/embed/${video}`"
            frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope;
            picture-in-picture" allowfullscreen
    >
    </iframe>

embed-responsive and aspect-ratio-16/9 are added to the container <div> while embed-responsive-item is added to the <iframe>.

Now, run your project and play around with the screen width and you'll see the YouTube embed respond beautifully!

Following along? View the GitHub Repo - phase 4 to view the code for this tutorial.

You can also view the full video tutorial series playlist on YouTube.

Looking for a tool to manage your VPS servers and app deployments? Check us out at cleavr.io

Full tutorial series on creating a documentation site using Vue/Nuxt, Tailwind, and Algolia.

Getting started with NuxtJS / Content module

Adam Miedema ・ Jan 12 '21

#nuxt #vue #node #tutorial

Make a mobile menu display and hide with Nuxt / Vue

Adam Miedema ・ Jan 13 '21

#nuxt #vue #tutorial

Pull in Markdown to Vue with Nuxt/Content and style with Tailwind Typography

Adam Miedema ・ Jan 13 '21

#nuxt #vue #tutorial