Using AMP YouTube Components

Table of Contents

• Features
• Usage
  • Frontmatter Setup
  • Embedding YouTube Videos
  • Examples
    • Embedding a Single Video
    • Embedding a Playlist
• Analytics Integration
  • Tracked Events

This Jekyll theme integrates AMP (Accelerated Mobile Pages) components to enhance the performance and user experience of embedded YouTube videos. The AMP YouTube component is specifically designed to ensure fast loading times and a responsive design, making it ideal for modern web development.

Features

• Responsive Video Embedding: The <amp-youtube> component automatically adjusts to different screen sizes, ensuring that videos are displayed optimally on all devices.
• Focused User Experience: We’ve set the rel=0 parameter to the YouTube Player ensures that related videos shown after the video ends will come from the same channel, maintaining a focused user experience.
• Enhanced Tracking: v3.1 With Google Analytics 4 (GA4) integration, you can track user interactions with your YouTube videos, including play, pause, and completion events. For more details, see the Analytics Integration section.
• Playlist Support: You can embed individual YouTube videos or entire playlists, providing flexibility in content presentation.
• Privacy-Enhanced Mode: v3.2 We’ve added the credentials="omit" attribute to the <amp-youtube> component to improve user privacy. This attribute prevents tracking when videos are embedded, offering a more privacy-focused experience.
• Fallback Support: For browsers that do not support the AMP YouTube player, a fallback message is provided, allowing users to watch the video directly on YouTube.

Usage

To embed YouTube videos using the amp-youtube extension in your Jekyll project, you must include specific frontmatter in your markdown files. This ensures that the your AMP page incorporates the necessary components for video embedding.

Frontmatter Setup

Add the following frontmatter to your markdown file to enable the amp-youtube extension:

---
layout: post
title: "Your Post Title"
date: 2024-11-23
amp:
  youtube: true
---

Embedding YouTube Videos

To embed a YouTube video, use the youtube.html template in your project. You can customize the embedding by providing the following parameters:

• id: The unique identifier for the YouTube video.
• playlist (optional): The playlist ID for embedding a playlist.
• title (optional): The title of the video for accessibility and tracking.
• indent (optional): The leading whitespace for resolving indentation issues with the include tag.

Examples

Embedding a Single Video

{% include youtube.html id="VIDEO_ID" title="VIDEO_TITLE" indent="  " %}

• Example Video 1:

  This browser does not support the YouTube video player. Watch on YouTube

• Example Vdieo 2:

  This browser does not support the YouTube video player. Watch on YouTube

Embedding a Playlist

{% include youtube.html id="VIDEO_ID" playlist="PLAYLIST_ID" title="PLAYLIST_TITLE" %}

• Example Playlist:

  This browser does not support the YouTube video player. Watch on YouTube

Analytics Integration

The theme supports Google Analytics 4 (GA4) for tracking video interactions. The site_content_postproc.html template processes AMP YouTube components to configure GA4 tracking. It extracts video IDs from <amp-youtube> tags and constructs CSS selectors for these components, enabling detailed analytics on video interactions.

Tracked Events

• Video Play: Triggered when a video starts playing.
• Video Pause: Triggered when a video is paused.
• Video Progress: Tracks progress milestones at 10%, 25%, 50%, 75%, and 100%.
• Video Completion: Triggered when a video finishes playing.

By leveraging the AMP YouTube component, this theme provides a robust solution for embedding videos that are fast, responsive, and analytics-ready, enhancing both performance and user engagement.