How to make facades for YouTube videos in Nuxt and TailwindCSS to optimize page loading speed

UpdatedFebruary 25, 2024

•3 min read•View as Markdown

How to make facades for YouTube videos in Nuxt and TailwindCSS to optimize page loading speed

Bart Martin

Comments

Join the discussion

No comments yet. Be the first to comment.

More from this blog

Nuxt - how to create a sitemap Google Search will like!

Hello! I recently implemented Sitemap in Nuxt, including i18n (internationalization) and dynamic links. I didn't find any tutorial online about implementing a sitemap combining these options, so I hope this guide will help some other devs. Internatio...

Feb 23, 20244 min read

Nuxt - how to create a sitemap Google Search will like!

Implementing preview functionality in Strapi CMS and Nuxt

Strapi CMS is an open-source content management system I implemented recently in one of my projects. Some parts of integrating Strapi with Nuxt were not well described, so I decided to share solutions I've done on my blog. Why preview? I work with so...

Jul 3, 20233 min read

A stack for beginner full stacks

When you are about to embark on a journey to become a full stack developer, or you want to build web services on your own, there are many choices to be made. A lot of them depend on the services you want to build and your current knowledge. When I to...

Jun 29, 20235 min read

bartmartin's blog

4 posts

<template> <div class="flex justify-center mt-5"> // DESKTOP  <div @mouseenter="showIframe = true" class="hidden sm:block relative overflow-hidden w-full" style="padding-top: 56.25%;">  <svg v-if="!showIframe" xmlns="http://www.w3.org/2000/svg" width="4.25em" height="4.25em" viewBox="0 0 256 180" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"> <path fill="#f00" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134" /> <path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /> </svg> <img v-if="!showIframe" :src="'https://img.youtube.com/vi/' + extractYouTubeID(sanitizedLink) + '/maxresdefault.jpg'" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover w-full h-full" /> <iframe v-if="showIframe" :src="YOUTUBE_LINK" title="YouTube video player" frameborder="0" allowfullscreen class="absolute top-0 left-0 w-full h-full"></iframe> </div> // MOBILE <div @click="showIframe = true" class="block sm:hidden relative overflow-hidden w-5/6" style="padding-top: 56.25%;">  <svg v-if="!showIframe" xmlns="http://www.w3.org/2000/svg" width="4.25em" height="4.25em" viewBox="0 0 256 180" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 z-10"> <path fill="#f00" d="M250.346 28.075A32.18 32.18 0 0 0 227.69 5.418C207.824 0 127.87 0 127.87 0S47.912.164 28.046 5.582A32.18 32.18 0 0 0 5.39 28.24c-6.009 35.298-8.34 89.084.165 122.97a32.18 32.18 0 0 0 22.656 22.657c19.866 5.418 99.822 5.418 99.822 5.418s79.955 0 99.82-5.418a32.18 32.18 0 0 0 22.657-22.657c6.338-35.348 8.291-89.1-.164-123.134" /> <path fill="#fff" d="m102.421 128.06l66.328-38.418l-66.328-38.418z" /> </svg>  <img v-if="!showIframe" :src="'https://img.youtube.com/vi/' + extractYouTubeID(sanitizedLink) + '/maxresdefault.jpg'" class="absolute top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 object-cover w-full h-full" />  <iframe v-if="showIframe" :src="YOUTUBE_LINK + '?autoplay=1&mute=1'" title="YouTube video player" frameborder="0" allowfullscreen autoplay loading="lazy" class="absolute top-0 left-0 w-full h-full"></iframe> </div> </div> </template> <script setup lang="ts"> const showIframe = ref(false) function extractYouTubeID(url: string) { const regExp = /^.*(youtu.be\/|v\/|e\/|u\/\w+\/|embed\/|watch\?v=|\&v=)([^#\&\?]*).*/; const match = url.match(regExp); if (match && match[2].length === 11) { return match[2]; } else { return null; } } </script>

How to make facades for YouTube videos in Nuxt and TailwindCSS to optimize page loading speed

Comments

More from this blog

Nuxt - how to create a sitemap Google Search will like!

Implementing preview functionality in Strapi CMS and Nuxt

A stack for beginner full stacks

What is a facade?

How to implement it?

Summary

Command Palette

Comments

More from this blog

What is a facade?

How to implement it?

Summary