Skip to main content

​
Overview

The ContenidoVideo component provides a styled wrapper for embedding YouTube videos in project detail pages. It features:
  • Lightweight YouTube embed using react-lite-youtube-embed
  • Material-UI Card styling matching the app theme
  • High-quality video poster (maxresdefault)
  • WebP image format support for better performance
  • Rounded border with custom styling
  • Emoji-decorated section title

​
Props

​
titulo
string
required
The video title, used for accessibility and SEO (passed to the YouTube embed as the title attribute)
​
videoUrl
string
required
The YouTube video ID (not the full URL). For example, if the video URL is https://youtube.com/watch?v=dQw4w9WgXcQ, you would pass "dQw4w9WgXcQ"

​
Usage Example

From ProyectoDetalle.jsx, showing how the video component is displayed in project details: 
import ContenidoVideo from "../components/ContenidoVideo";
import proyectos from "../data/proyectos";

export default function DetalleProyecto() {
  const { slug } = useParams();
  const proyectoData = proyectos.find((p) => p.id === slug);

  return (
    <div>
      {proyectoData.videoUrl && (
        <ContenidoVideo
          titulo="Video del Experimento"
          videoUrl={proyectoData.videoUrl}
        />
      )}
    </div>
  );
}
The component checks if proyectoData.videoUrl exists before rendering, making it safe to use even when some projects don’t have videos.

​
Component Structure

​
Card Container

The component uses Material-UI’s Card and CardContent for structure: 
<Card
  sx={{
    backgroundColor: "#2d1f6e",
    height: "100%",
    display: "flex",
    flexDirection: "column",
  }}
>
  <CardContent
    sx={{
      flex: 1,
      display: "flex",
      flexDirection: "column",
      justifyContent: "center",
    }}
  >
    {/* Content here */}
  </CardContent>
</Card>

​
Section Title

The title includes a film emoji and uses the brand cyan color: 
<h2 style={{ color: "#15F5BA", marginBottom: "15px" }}>
  🎬 Video del Experimento
</h2>

​
Video Embed Container

The video is wrapped in a styled div with rounded corners and a border: 
<div
  style={{
    borderRadius: "12px",
    border: "3px solid #525554",
    overflow: "hidden", // Ensures video corners stay rounded
  }}
>
  <LiteYouTubeEmbed
    id={videoUrl}
    title={titulo}
    poster="maxresdefault"
    webp={true}
  />
</div>

​
Lite YouTube Embed

This component uses react-lite-youtube-embed for performance benefits:

​
Installation

npm install react-lite-youtube-embed

​
Import Required

import LiteYouTubeEmbed from "react-lite-youtube-embed";
import "react-lite-youtube-embed/dist/LiteYouTubeEmbed.css";

​
Benefits

react-lite-youtube-embed loads much faster than the standard YouTube iframe embed because it:
  • Shows a static thumbnail initially
  • Only loads the full YouTube player when the user clicks play
  • Reduces initial page load by ~224KB
  • Improves Core Web Vitals scores

​
Configuration

ParameterValuePurpose
id{videoUrl}YouTube video ID
title{titulo}Accessibility title
poster"maxresdefault"Highest quality thumbnail (1280×720)
webptrueUse WebP format for thumbnail (better compression)

​
Styling Details

​
Color Scheme

ElementColorHex Code
Card BackgroundPurple#2d1f6e
Title TextCyan#15F5BA
BorderGray#525554

​
Layout Properties

  • Card height: 100% (fills parent container)
  • Border radius: 12px
  • Border width: 3px
  • Title margin: 15px bottom spacing
  • Flex layout: Centers content vertically

​
Video ID Extraction

If you need to extract the video ID from a full YouTube URL: 
function getYouTubeID(url) {
  const regex = /(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/;
  const match = url.match(regex);
  return match ? match[1] : null;
}

// Usage
const fullUrl = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
const videoId = getYouTubeID(fullUrl); // "dQw4w9WgXcQ"

<ContenidoVideo
  titulo="My Video"
  videoUrl={videoId}
/>

​
Layout Integration

In ProyectoDetalle.jsx, the video component is placed in a two-column layout: 
<Agrupar>
  <Grupo>
    <TarjetasContenido titulo="Conclusiones" contenido={...} />
    <TarjetasContenido titulo="Descargas" contenido={...} />
  </Grupo>
  
  <ColumnaGrande>
    <ContenidoVideo
      titulo="Video del Experimento"
      videoUrl={proyectoData.videoUrl}
    />
  </ColumnaGrande>
</Agrupar>
The ColumnaGrande component gives the video 66% of the width on desktop, creating a balanced layout.

​
Responsive Behavior

The Agrupar styled component changes to a column layout on screens smaller than 1100px, making the video full-width on mobile devices.

​
Alternative: Standard YouTube Embed

If you prefer the standard YouTube iframe embed: 
<iframe
  width="100%"
  height="400"
  src={`https://www.youtube.com/embed/${videoUrl}`}
  title={titulo}
  frameBorder="0"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
  style={{
    borderRadius: "12px",
  }}
/>
However, the lite embed is recommended for better performance.

​
Material-UI Components Used

  • Card - Main container
  • CardContent - Content wrapper with flex layout

Build docs developers (and LLMs) love

Get started for freeTalk to us