TailwindCSS를 사용한 반응형 YouTube 삽입

의 연속입니다.


Nuxt/Content의 가장 멋지고 편리한 기능은 Markdown 파일에서 Vue 구성 요소를 감지한 다음 활성화하는 기능입니다.

Markdown 파일의 Vue 구성 요소

위의 비디오는 마크다운 파일에 Vue 구성 요소 태그를 추가한 다음 components/global 디렉토리에 구성 요소를 만드는 방법을 보여줍니다.

이것은 그 자체로 흥미로운 서면 자습서를 만들지 않습니다. 따라서 이것을 시작점으로 사용하여 YouTube 비디오 삽입인 예제 Vue 구성 요소를 조금 더 반응형으로 만드는 방법을 살펴보겠습니다.

Tailwind 종횡비 및 응답성 패키지 추가

package.json 파일에서 몇 가지 새로운 종속성을 추가합니다.

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

그런 다음 설치하려면 프로젝트의 루트 디렉터리에 다음 터미널 명령을 실행합니다.

yarn install

이 패키지는 YouTube 비디오에 대한 올바른 종횡비를 제공하고 브라우저 창 너비 변경에 반응하는 YouTube 포함을 만드는 데 도움이 됩니다.

tailwind.config.js 파일 업데이트

이제 tailwind.config.js 파일에 플러그인을 포함해야 합니다.

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"),
  ]
}

또한 aspectRatio 섹션과 variants 섹션을 Tailwind 구성 파일에 추가했습니다.

YouTube 구성요소 업데이트

global 폴더 아래에 생성된 YouTube.vue 구성 요소가 있습니다.

마크다운 파일에 Vue 구성 요소 태그를 추가하려는 경우 Nuxt/Content는 해당 구성 요소가 global 디렉토리 내에 정의될 것으로 예상합니다.

YouTube 비디오를 반응형으로 만들기 위해 적절한 클래스를 추가합니다.

<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 및 aspect-ratio-16/9는 컨테이너<div>에 추가되고 embed-responsive-item는 <iframe>에 추가됩니다.

이제 프로젝트를 실행하고 화면 너비를 조정하면 YouTube 임베딩이 아름답게 반응하는 것을 볼 수 있습니다!

팔로우? 이 튜토리얼의 코드를 보려면 GitHub Repo - phase 4을 보십시오.

YouTube에서 전체 동영상을 볼 수도 있습니다.

VPS 서버 및 앱 배포를 관리할 도구를 찾고 계십니까? cleavr.io에서 확인하세요.

Vue/Nuxt, Tailwind 및 Algolia를 사용하여 문서 사이트를 만드는 방법에 대한 전체 자습서 시리즈입니다.

NuxtJS / 콘텐츠 모듈 시작하기

Adam Miedema ・ 1월 12일 ・ 3분 읽기

#nuxt #vue #node #tutorial

Nuxt / Vue로 모바일 메뉴 표시 및 숨기기

Adam Miedema ・ 1월 13일 ・ 3분 읽기

#nuxt #vue #tutorial

Nuxt/Content 및 Tailwind Typography로 스타일을 사용하여 Vue에 Markdown 가져오기

Adam Miedema ・ 1월 13일 ・ 4분 읽기

#nuxt #vue #tutorial

Nuxt/Content 및 Aloglia vue-instantsearch로 키보드 탐색 가능한 사이트 검색 생성

Adam Miedema ・ 1월 13일 ・ 5분 읽기

#algolia #vue #nuxt #tutorial