With our new Single Video Player, you can now embed individual videos directly onto your webpages with a simple snippet, allowing your videos to play inline without triggering a full video takeover.
This feature offers a streamlined way to integrate video content while ensuring an optimal viewing experience.
Key Benefits
Seamless Embedding: Add a single video to your website without requiring a collection.
Flexible Display: Set the video player size easily within the embed code.
Optimized User Experience: Videos will require a user-initiated play action (no autoplay), and they will be fully interactive within the inline player.
How to Embed a Single Video
1. Access the Video Share Modal:
Navigate to the Ghost Dashboard > Videos and select the video you want to embed.
Click the Share button on the video details page.
2. Select the 'Add to Site' Tab:
Here, you will find the embed snippet with default dimensions set at
width='338' height='600'(9:16 portrait).
3. Copy the Embed Snippet:
Users can copy the embed code by clicking the copy icon or manually selecting the text.
A 'Copied' confirmation message will appear upon successful copy.
4. Adjust the Video Player Size (Optional):
Modify the
widthandheightvalues in the embed code to fit your desired dimensions.If the width and height values are removed, the video will fill the available space in the surrounding div.
Minimum supported size: 300px x 300px.
If the dimensions do not match the video aspect ratio, the player will apply letterboxing to maintain proper scaling.
5. Paste the Snippet on Your Website:
Insert the embed code into your website’s HTML wherever you want the video to appear.
User Experience & Player Controls
Video Player Features:
Play/Pause Button: Overlays the video; users must click to start playback.
Progress Bar: Located at the bottom, allowing users to scrub through the video.
Audio Control: Users can toggle audio on/off (volume level follows device settings).
Full-Screen Mode:
Clicking full-screen expands the video to fill the entire screen (not just the browser window).
Users can exit full-screen by clicking the X button or pressing Escape.
Inactive Cursor Behavior:
If the cursor remains inactive for 2 seconds, player controls fade out for an immersive viewing experience.
Controls reappear upon cursor movement or screen touch (on mobile devices).
Video Pausing Behavior:
If a user clicks a link that opens in a new tab, the video pauses.
Users must manually resume playback upon returning to the page.
