How to Integrate Videos in Your Projects

Introduction to Videos on the Web

Videos are an excellent way to enrich your portfolio and present your projects dynamically.

Method 1: YouTube Video

You can easily embed a YouTube video using the Hugo shortcode:

{{< youtube dQw4w9WgXcQ >}}

Method 2: Vimeo Video

For Vimeo videos, use this shortcode:

{{< vimeo 146022717 >}}

Method 3: Local HTML5 Video

For a locally hosted video, use the HTML5 video tag:

<video width="100%" controls>
  <source src="/videos/my-project.mp4" type="video/mp4">
  <source src="/videos/my-project.webm" type="video/webm">
  Your browser does not support the video tag.
</video>

Method 4: Video with Poster

Add a preview image:

<video width="100%" controls poster="/images/video-poster.jpg">
  <source src="/videos/demo.mp4" type="video/mp4">
</video>

Best Practices

1. Optimize your videos: Use modern formats like WebM and MP4
2. Add subtitles: Make your videos accessible
3. Lazy loading: Load videos only when necessary
4. Responsive: Ensure your videos adapt to all screens

Complete Example

Here’s an example of an embedded YouTube video:

{{< youtube W7qWa52k-nE >}}

Conclusion

Integrating videos into your portfolio can really make a difference in presenting your projects and skills.