post

Markdown Post with Video Guide

Markdown Post with Video Guide

Overview

This guide explains how to create a Markdown-formatted blog post with video integration using the Snowlake Jekyll theme.

Front Matter Configuration

Layout and Basic Information

layout: posts/post                # Required layout for post
title: "Post Title"               # Main title of the blog post
date: YYYY-MM-DD HH:MM:SS +TIMEZONE  # Publication date and time

Categorization and Metadata

categories: [category1, category2]  # Post categories
tags: [tag1, tag2]                  # Post tags
author: "Author Name"               # Post author
post_image: "/path/to/featured-image.webp"  # Featured post image

Video Configuration

post_format: "video"               # Indicates video post type
header_video:                      # Optional header video
  id: "video_id"                   # Video identifier
  provider: "vimeo/youtube"        # Video hosting platform

post_video:                        # Inline video configuration
  video:
    id: "video_id"
    provider: "youtube/vimeo"

Advanced Metadata

badge_color: "bg-purple"           # Optional badge color
meta_title: "SEO Title"            # SEO-optimized title
meta_description: |                # SEO description
  Detailed description of the post
permalink: "/posts/post-slug"      # Custom permalink

Video Integration Techniques

Supported Video Providers

  • YouTube
  • Vimeo
  • Self-hosted videos

Header Video Configuration

header_video:
  id: "90355541"      # Vimeo video ID
  provider: "vimeo"

Inline Post Video

post_video:
  video:
    id: "QILiHiTD3uc"  # YouTube video ID
    provider: "youtube"

Video Embedding Best Practices

Video Selection

  1. Choose high-quality, relevant videos
  2. Ensure proper licensing
  3. Optimize video performance
  4. Provide context and description
  5. Support multiple platforms

Responsive Video Embedding

<div class="video-responsive">
  <iframe 
    src="https://player.vimeo.com/video/VIDEO_ID" 
    allowfullscreen>
  </iframe>
</div>

Customization Options

  • Control video playback
  • Add custom video players
  • Implement lazy loading
  • Create video galleries
  • Support multiple video formats

Performance Optimization

  • Use lightweight video embeds
  • Implement lazy loading
  • Optimize video file sizes
  • Use adaptive streaming
  • Minimize initial page load time

SEO Considerations

  • Add video schema markup
  • Provide descriptive titles
  • Include video transcripts
  • Optimize video metadata
  • Support video search indexing

Accessibility Guidelines

  • Add captions and subtitles
  • Provide transcript
  • Support keyboard navigation
  • Ensure color contrast
  • Add ARIA labels

Troubleshooting

  • Verify video URLs
  • Check platform compatibility
  • Test responsive behavior
  • Validate video IDs
  • Ensure cross-browser support

Example Workflow

  1. Select compelling video
  2. Choose video platform
  3. Configure video metadata
  4. Write descriptive content
  5. Embed video responsively
  6. Review and refine
  7. Publish