Media

A versatile component for displaying images, videos, and YouTube content with optional parallax effects.

Installation

Install the following dependencies:

react-youtube

Import the component:

import Media from "@/components/utils/Media"

Basic Image

Display images with optional alt text and responsive sizing.

background

Video Support

Handle video files with autoplay and loop options.

YouTube Integration

Easily embed YouTube videos using the videoId prop.

Parallax Effect

Add smooth parallax scrolling effects to your media.

background

Props

Prop
Type
Default
Description
file
string
—

Path to the media file (image or video)

youtubeLink
string
—

YouTube video URL

autoplay
boolean
—

Enable autoplay for videos

loop
boolean
—

Enable looping for videos

parallax
boolean
—

Enable parallax scrolling effect

alt
string
—

Alt text for images