portfolio-items

Video Portfolio Item Guide

Video Portfolio Item Guide

Overview

This guide explains how to create a portfolio item with video-based layouts using the Snowlake Jekyll theme.

Front Matter Configuration

General Metadata

date: YYYY-MM-DD HH:MM:SS +TIMEZONE  # Publication date and time
layout: portfolio/items/video-layout  # Required layout for video portfolio
title: "Portfolio Item Title"         # Main title of the portfolio item
sub_title: "Subtitle Description"     # Optional subtitle
video_image: "/path/to/video-thumbnail.jpg"  # Thumbnail image for video
video: "/path/to/video-file.mp4"      # Video file path

Client Information

client: "Client Name"            # Name of the client or organization

Categorization

filters:                              # Categorization tags
  - branding
  - video
  # Add additional relevant tags

Video Configuration Guidelines

Video File Requirements

  • Supported Formats: MP4, WebM, OGG
  • Recommended Resolutions:
    • 1920x1080 (Full HD)
    • 1280x720 (HD)
  • Maximum File Size: 100MB
  • Compression: Use modern video compression techniques

Thumbnail Image

  • High-quality representative frame
  • 16:9 aspect ratio recommended
  • Minimum resolution: 1280x720
  • File formats: JPG, WebP, PNG

Content Structure

Markdown Content Guidelines

---
# Front Matter (as described above)
---

<p class="lead">
Introductory lead paragraph summarizing the video's essence or project highlights.
</p>

<p>
Detailed description providing context, background, or additional insights about the video project.
</p>

Best Practices

Video Content

  1. High-Quality Production

    • Ensure professional video quality
    • Clear audio and visual elements
    • Smooth editing and transitions

  2. Storytelling

    • Create a compelling narrative
    • Showcase project’s unique aspects
    • Engage viewers quickly

  3. Technical Considerations

    • Optimize video for web streaming
    • Provide captions or subtitles
    • Include descriptive metadata

Performance Optimization

  • Compress video files
  • Use adaptive streaming
  • Implement lazy loading
  • Provide multiple video formats
  • Use efficient video codecs

Accessibility Features

  • Add closed captions
  • Include transcript
  • Ensure keyboard navigation
  • Support screen readers
  • Provide alternative text descriptions

Customization Options

  • Control video playback
  • Add custom video controls
  • Implement autoplay settings
  • Support for external video platforms
  • Responsive video embedding

Troubleshooting

Common Video Issues

  • Verify video file paths
  • Check file permissions
  • Ensure browser compatibility
  • Test on multiple devices
  • Validate video encoding

Performance Diagnostics

  • Monitor page load times
  • Check video streaming performance
  • Analyze user interaction metrics
  • Optimize video delivery
  • FFmpeg for video compression
  • HandBrake for video conversion
  • VideoJS for custom video players
  • WebM for open video format

Example Workflow

  1. Plan video content
  2. Produce high-quality video
  3. Create compelling thumbnail
  4. Compress and optimize video
  5. Add descriptive content
  6. Configure front matter
  7. Test across devices

Technical Considerations

  • Supports modern video formats
  • Responsive video embedding
  • Cross-browser compatibility
  • Mobile-friendly design
  • Performance-optimized playback

Video Hosting Options

  1. Self-hosted
    • Direct video file in repository
    • Full control over video
  2. External Platforms
    • YouTube embedding
    • Vimeo integration
    • Wistia professional hosting

SEO and Metadata

  • Add descriptive video title
  • Include relevant keywords
  • Provide comprehensive description
  • Use schema.org video markup
  • Optimize for search engines