Responsive YouTube embeds with TailwindCSS
Tags: tailwindcss, vue, nuxt, tutorial
Published: 2021-01-13 17:58:11

This is a continuation of [Getting started with NuxtJS / Content module](https://dev.to/armiedema/getting-started-with-nuxtjs-content-module-3l5o).

--- 

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
{% youtube Klw0PLnzpJk %}

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

{% youtube TJcHyfzkXf4 %}

In our [package.json](https://github.com/cleavr/docs-template/blob/phase-4/package.json) file, we'll add a few new dependencies. 

```json
  "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](https://github.com/cleavr/docs-template/blob/phase-4/tailwind.config.js) file. 

```javascript
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](https://github.com/cleavr/docs-template/blob/phase-4/components/global/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. 

```html
<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](https://github.com/cleavr/docs-template/tree/phase-4) to view the code for this tutorial. 

You can also view the full video [tutorial series playlist](https://youtube.com/playlist?list=PLApnZzwJN4G5jU3NzBPWpHWJiXTEO9esd) on YouTube. 

Looking for a tool to manage your VPS servers and app deployments? Check us out at [cleavr.io](https://cleavr.io)

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

{% link https://dev.to/armiedema/getting-started-with-nuxtjs-content-module-3l5o %}

{% link https://dev.to/armiedema/make-a-mobile-menu-display-and-hide-with-nuxt-vue-54mc %}

{% link https://dev.to/armiedema/pull-in-markdown-to-vue-with-nuxt-content-and-style-with-tailwind-typography-2em6 %}

{% link https://dev.to/armiedema/responsive-youtube-embeds-with-tailwindcss-4635 %}

{% link https://dev.to/armiedema/create-a-keyboard-navigable-site-search-with-nuxt-content-and-aloglia-vue-instantsearch-2d6o %}