Skip to main content
The Video component displays a YouTube video with a custom thumbnail and the Geometry Dash logo. It’s designed for showcasing game trailers or featured content.

​
Features

  • Geometry Dash logo display
  • YouTube video thumbnail link
  • Responsive container
  • Shadow effect on video thumbnail
  • Fixed width container for consistent sizing

​
Usage

src/pages/index.astro
---
import Video from "../components/Video.astro";
---

<Video />

​
Component Code

The Video component is a static component that doesn’t accept props:
src/components/Video.astro
<section>
  <div class="d-flex justify-content-center align-items-center mt-5">
    <img
      class="img-fluid d-flex"
      src="https://www.robtopgames.com/Images/GJ_logo_001.png"
      width="783"
      height="94"
    />
  </div>
  <div class="container mw-100" style="height: auto;width: 687px;">
    <div class="autoplay shadow mt-4 video-thumb">
      <a href="https://youtu.be/LxA4NJMiZ8o">
        <img 
          class="img-fluid" 
          src="https://img.youtube.com/vi/LxA4NJMiZ8o/maxresdefault.jpg" 
        />
      </a>
    </div>
  </div>
</section>

​
Video Configuration

The component currently displays a hardcoded YouTube video:

​
YouTube Thumbnail URL Pattern

YouTube provides automatic thumbnails for videos: 
https://img.youtube.com/vi/{VIDEO_ID}/maxresdefault.jpg
Other available thumbnail sizes:
  • default.jpg - 120x90
  • mqdefault.jpg - 320x180
  • hqdefault.jpg - 480x360
  • sddefault.jpg - 640x480
  • maxresdefault.jpg - 1280x720 (used in component)

​
Styling Features

​
Container Sizing

The video container has a fixed width for consistency: 
<div class="container mw-100" style="height: auto;width: 687px;">

​
Shadow Effect

The video thumbnail has a Bootstrap shadow class: 
<div class="autoplay shadow mt-4 video-thumb">

​
Responsive Image

Both the logo and thumbnail use Bootstrap’s .img-fluid class for responsive sizing: 
<img class="img-fluid" src="..." />

​
Customization

To change the featured video, update the video ID in three places:
src/components/Video.astro
<div class="autoplay shadow mt-4 video-thumb">
  <a href="https://youtu.be/YOUR_VIDEO_ID">
    <img 
      class="img-fluid" 
      src="https://img.youtube.com/vi/YOUR_VIDEO_ID/maxresdefault.jpg" 
    />
  </a>
</div>

​
Making it Dynamic

To accept different videos as props:
src/components/Video.astro
---
interface Props {
  videoId: string;
}

const { videoId } = Astro.props;
---

<section>
  <div class="d-flex justify-content-center align-items-center mt-5">
    <img
      class="img-fluid d-flex"
      src="https://www.robtopgames.com/Images/GJ_logo_001.png"
      width="783"
      height="94"
    />
  </div>
  <div class="container mw-100" style="height: auto;width: 687px;">
    <div class="autoplay shadow mt-4 video-thumb">
      <a href={`https://youtu.be/${videoId}`}>
        <img 
          class="img-fluid" 
          src={`https://img.youtube.com/vi/${videoId}/maxresdefault.jpg`} 
        />
      </a>
    </div>
  </div>
</section>
Usage: 
<Video videoId="LxA4NJMiZ8o" />
  • Apps - Download links for app stores
  • Socials - Social media links

Build docs developers (and LLMs) love

Get started for freeTalk to us