Video Implementation Guide
How to embed your Premier Hotel Video on your property's website with full analytics tracking.
Basic Video Embed
Your video is hosted on Mux. Use the playback ID we provide to embed it on your site. The simplest option is an HTML5 video tag with Mux's streaming URL:
<!-- Basic HTML Embed -->
<script src="https://cdn.jsdelivr.net/npm/hls.js@latest"></script>
<video
id="hotel-video"
controls
playsinline
style="width: 100%; max-width: 800px;"
></video>
<script>
var videoSrc = "https://stream.mux.com/YOUR_PLAYBACK_ID.m3u8";
var video = document.getElementById("hotel-video");
if (video.canPlayType("application/vnd.apple.mpegurl")) {
// Safari - native HLS support
video.src = videoSrc;
} else if (Hls.isSupported()) {
// Chrome, Firefox, etc.
var hls = new Hls();
hls.loadSource(videoSrc);
hls.attachMedia(video);
}
</script>React / Next.js Embed (Recommended)
If your site uses React or Next.js, use the official Mux Player component for automatic adaptive streaming, analytics, and accessibility.
npm install @mux/mux-player-react
import MuxPlayer from "@mux/mux-player-react";
export default function HotelVideo() {
return (
<MuxPlayer
playbackId="YOUR_PLAYBACK_ID"
metadata={{
video_title: "Hotel Name - Property Video",
viewer_user_id: "SESSION_ID", // See Step 3
}}
autoPlay="muted"
style={{ width: "100%", maxWidth: "800px" }}
/>
);
}Analytics & Conversion Tracking
To measure whether video viewers convert to bookers, pass a unique session ID to the Mux player. When a booking completes, log that same session ID in your booking system so we can correlate the two.
// 1. Generate a session ID when the page loads
const sessionId = crypto.randomUUID();
// 2. Pass it to the Mux player
<MuxPlayer
playbackId="YOUR_PLAYBACK_ID"
metadata={{
video_title: "Hotel Name - Property Video",
viewer_user_id: sessionId,
custom_1: window.location.pathname, // Page where video appears
}}
/>
// 3. When a booking completes, log the session ID
function onBookingComplete(bookingData) {
// Send to your analytics / booking system
fetch("/api/track-booking", {
method: "POST",
body: JSON.stringify({
session_id: sessionId,
booking_id: bookingData.id,
timestamp: new Date().toISOString(),
}),
});
}What This Enables
- ✓Video views — How many visitors watched the video
- ✓Watch time — How long visitors watched (full, partial, skipped)
- ✓Completion rate — Percentage who watched the entire video
- ✓Viewer-to-booker conversion — Did people who watched the video go on to book?
- ✓Engagement vs. booking correlation — Do viewers who watch more of the video book more often?
Recommended Video Placement
Homepage Hero
Place the video prominently on the homepage, either as a background or side-by-side with your booking CTA. Autoplay muted for maximum engagement.
Room Pages
Add room-specific clips to individual room type pages to help guests visualize their stay before booking.
Booking Flow
Include a short video on the booking confirmation page or during the checkout flow to reduce abandonment.
Special Offers
Feature seasonal or promotional videos on dedicated landing pages to drive direct bookings with specific offers.