Youtube Video Player for CMSimple_XH

The includephp plugin allows CMSimple_XH users to safely include and execute PHP files directly in page content. It is designed for static includes only, executing PHP files placed in a controlled directory plugins/includephp/php/ and inserting their output into the CMS page.

Description

The includephp plugin allows CMSimple_XH users to safely include and execute PHP files directly in page content. It is designed for static includes only, executing PHP files placed in a controlled directory plugins/includephp/php/ and inserting their output into the CMS page.

Insert the player into a page

In the CMSimple_XH page editor, place the plugin call where you want the player to appear:

{{{includephp('youtube.php')}}}

Overview

This video player lets you watch multiple YouTube videos on your website with a modern, 16:9 layout, including a poster overlay, glowing play button, and user-friendly controls like play/pause, mute, volume, progress bar, and fullscreen. Videos automatically start at 1 second to skip unwanted intros.

1. How to Play a Video

Click the play button (glowing circular ▶ in the center).
The video will start playing 1 second in.
The poster overlay fades away while the video plays.

2. Switching Videos

Use the dropdown menu above the player to select a video.
The poster overlay will update to the new video’s thumbnail.
Click the play button or press the Play/Pause button to start the new video (also starts at 1 second).

3. Player Controls

4. Poster Overlay

Shows the video thumbnail before playback.
Fades out when the video starts.
Fades back in when the video ends.
Click anywhere on the overlay to start playing the video.

5. Adding More Videos

Open the PHP file.
Locate the $videos array at the top:

$videos = [
    ['id' => 'VIDEO_ID','title' => 'Video Title','poster' => 'Poster URL'],
];

Add a new entry for each video:

['id' => 'NEW_VIDEO_ID','title' => 'New Video','poster' => 'Poster URL'],

Save the file and reload your page. The new video appears in the dropdown menu.

Tip: If you add many videos, consider grouping them or adding a search function to the dropdown.

6. Notes & Tips

Responsive Design: Works on desktop, tablet, and mobile.
16:9 Videos: All videos maintain a standard 16:9 aspect ratio.
Performance: Only the selected video iframe loads, so even many videos won’t slow down the page.
Video Start Time: Every video starts at 1 second to skip unwanted intros.
Poster Quality: Use high-resolution thumbnails for the poster overlay for best visual effect.

7. Troubleshooting