.mux-player-container {
	margin: 1.5rem 0;
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	border-radius: 6px;
	overflow: hidden;
}


// Function to initialize Mux players
function initMuxPlayers() {
	// Check if Mux script is already loaded
	if (window.customElements && customElements.get('mux-player')) {
		setupPlayers();
	} else {
		// Load the script if not already loaded
		const muxScript = document.createElement('script');
		muxScript.src = 'https://cdn.jsdelivr.net/npm/@mux/mux-player';
		muxScript.async = true;
		muxScript.onload = setupPlayers;
		document.head.appendChild(muxScript);
	}
}

// Function to set up all players on the page
function setupPlayers() {
	document.querySelectorAll('.mux-player-container').forEach((container) => {
		const playbackId = container.getAttribute('data-playback-id');
		const videoTitle = container.getAttribute('data-title') || '';

		if (!playbackId) return;

		// Only create player if it doesn't already exist in the container
		if (!container.querySelector('mux-player')) {
			// Create the mux-player element
			const player = document.createElement('mux-player');
			player.setAttribute('playback-id', playbackId);
			player.setAttribute('stream-type', 'on-demand');
			player.setAttribute('metadata-video-title', videoTitle);
			player.setAttribute('primary-color', '#FFFFFF');
			player.setAttribute('secondary-color', '#000000');
			player.setAttribute('accent-color', '#ff8a00');
			player.setAttribute('loading', 'lazy');
			player.style.width = '100%';
			player.style.height = 'auto';
			player.style.maxWidth = '100%';
			player.style.borderRadius = '6px';

			// Clear the container and append the player
			container.innerHTML = '';
			container.appendChild(player);
		}
	});
}

// Run initialization when DOM is loaded
document.addEventListener('DOMContentLoaded', initMuxPlayers);

// Also run when content might be dynamically changed
window.addEventListener('load', initMuxPlayers);

// Set up a MutationObserver to detect when new content is added to the page
const observer = new MutationObserver(function (mutations) {
	let shouldInit = false;

	// Check if relevant mutations occurred
	mutations.forEach(function (mutation) {
		if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {
			// Check if any of the added nodes might contain our player containers
			for (let i = 0; i < mutation.addedNodes.length; i++) {
				const node = mutation.addedNodes[i];
				if (node.nodeType === 1) {
					// Element node
					// Check if the node itself is a container
					if (
						node instanceof Element &&
						node.classList &&
						node.classList.contains('mux-player-container')
					) {
						shouldInit = true;
						break;
					}
					// Check if the node contains containers
					else if (
						node instanceof Element &&
						typeof node.querySelectorAll === 'function'
					) {
						const containers = node.querySelectorAll(
							'.mux-player-container',
						);
						if (containers.length > 0) {
							shouldInit = true;
							break;
						}
					}
				}
			}
		}
	});

	// Initialize players if needed
	if (shouldInit) {
		setTimeout(initMuxPlayers, 100);
	}
});

// Start observing the document body for changes
observer.observe(document.body, { childList: true, subtree: true });

// For Mintlify's client-side navigation
if (typeof window !== 'undefined') {
	window.addEventListener('turbolinks:load', initMuxPlayers);
	window.addEventListener('page:load', initMuxPlayers);
	window.addEventListener('spa:page-change', initMuxPlayers);
}


Links to Gitpod reference material you may find helpful.

References - Gitpod Enterprise

Overview

Gitpod Documentation

Account - Gitpod Flex

Account

Configuration - Gitpod Flex

Dotfiles are a way to customize your developer environment according to your personal needs.

Dotfiles - Gitpod Flex

Dotfiles

Learn how to work with multiple repositories in a single Gitpod Flex environment

Multi-Repository Environments

Migrate from Gitpod Classic to Gitpod Flex

Learn how to integrate Gitpod Flex with other tools and services. Gitpod works with any editor that uses SSH to connect to a remote backend.

IDEs & Editors - Gitpod Flex

VS Code - Gitpod Flex

Visual Studio Code

Cursor - Gitpod Flex

Cursor

JetBrains - Gitpod

JetBrains

Zed - Gitpod Flex

Runners in Gitpod make it easy and secure to run environments in your infrastructure, either locally or in your cloud ensuring all your sensitive source code and data stay entirely within your network

Runners - Gitpod Flex

This page outlines the essential requirements for using Gitpod, with special attention to network configurations that ensure optimal performance.

Requirements - Gitpod Flex

Requirements

Organizations represent groups you can join within an account. They let users share resources like remote runners and projects to collaborate easily.

Organizations - Gitpod Flex

Create or join an organization - Gitpod Flex

Create or join an organization

Manage organization - Gitpod Flex

Manage organization

Members shows the list of all members in your organization.

View members - Gitpod Flex

View members

Members of an organization can collaborate on projects and share resources like remote runners and projects to collaborate easily.

Manage members - Gitpod Flex

Manage members

Environment inventory shows the list of all the environments that are currently running in your organization.

Environment inventory - Gitpod Flex

Environment inventory

Audit logs provide a record of all actions taken in a Gitpod Flex organization.

Audit Logs - Gitpod Flex

Audit Logs

Projects in Gitpod allow you to create standardized development environments across your organization.

Projects - Gitpod Flex

Projects

Learn what is project lifecycle in Gitpod Flex.

Projects lifecycle - Gitpod Flex

Projects lifecycle

Learn how to configure projects secrets in your Gitpod Project

Project Secrets - Gitpod Flex

Project Secrets

Learn how to integrate Gitpod Flex with other tools and services.

Integrations - Gitpod Flex

Learn how to use the Gitpod Flex CLI to interact with your environment.

Gitpod CLI - Gitpod Flex

Gitpod CLI

Port sharing allows you to expose HTTP ports from your running Gitpod environment to the internet, enabling easy sharing and collaboration. This feature is available for cloud-hosted Gitpod environments not Gitpod Desktop environments.

Port sharing - Gitpod Flex

Port sharing

Personal Access Tokens (PATs) provide a way to authenticate and authorize programmatic access to Gitpod. You can use PATs as an alternative to using your password for authentication when using the Gitpod CLI or API.

Personal Access Tokens - Gitpod Flex

Personal Access Tokens

The Gitpod SDK is a powerful tool for developers to interact with Gitpod. It allows you to create environments, interact with them through tasks and services, manage runners, and more.

Gitpod SDK - Gitpod Flex

Gitpod SDK

Gitpod Desktop is the fastest and easiest way to run and recreate cloud development environments locally. It is currently available for Apple silicon users.

Gitpod Desktop

Learn how to integrate with your source control provider in Gitpod.

Source Control - Gitpod Flex

GitHub - Gitpod Flex

GitHub

GitLab - Gitpod Flex

GitLab

Bitbucket Cloud - Gitpod Flex

Bitbucket Cloud

Azure DevOps - Gitpod Flex

Azure DevOps

Single Sign-on for your organization in Gitpod

Single Sign-on - Gitpod Flex

Learn how to set up Single Sign-on with Amazon Cognito for your team in Gitpod.

Single Sign-on with Amazon Cognito - Gitpod Flex

Amazon Cognito

Learn how to set up Single Sign-on with GitLab for your team in Gitpod.

Single Sign-on with GitLab - Gitpod Flex

Learn how to set up Single Sign-on with Google for your team in Gitpod.

Single Sign-on with Google - Gitpod Flex

Google

Learn how to set up Single Sign-on with Microsoft Entra ID for your team in Gitpod.

Single Sign-on with Microsoft Entra ID - Gitpod Flex

Microsoft Entra ID

Learn how to set up Single Sign-on with Okta for your team in Gitpod.

Single Sign-on with Okta - Gitpod Flex

Okta

Introduction to Gitpod Enterprise

Use cases - Gitpod Enterprise

Use cases

Learn how to configure Gitpod workspaces and projects to customize your development environment.

Configure Gitpod - Gitpod Enterprise

Configure Gitpod

.gitpod.yml - Gitpod Enterprise

.gitpod.yml

Gitpod URL - Gitpod Enterprise

Gitpod URL

Learn about Gitpod API and how to use it. The Gitpod public API grants direct access to Gitpod data for integration into 3rd party applications.

Gitpod Public API - Gitpod Enterprise

Gitpod public API

Learn about the Gitpod CLI, a CLI tool used inside Gitpod workspaces. Also, learn about how you can use it to manage your workspaces and smooth your developer experience.

Gitpod CLI - Gitpod Enterprise

Compatibility - Gitpod Enterprise

Compatibility

Gitpod integrates with many tools and services to make your development workflow more efficient.

Integrations - Gitpod Enterprise

GitHub - Gitpod Enterprise

GitLab - Gitpod Enterprise

Bitbucket - Gitpod Enterprise

Bitbucket

Azure DevOps - Gitpod Enterprise

Learn about JetBrains Gateway integration with Gitpod.

JetBrains Gateway - Gitpod Enterprise

JetBrains Gateway

Learn about Kubernetes Development with Gitpod

Kubernetes - Gitpod Enterprise

Kubernetes

Learn about Tailscale integration with Gitpod.

Tailscale - Gitpod Enterprise

Tailscale

Amazon Web Services (AWS) - Gitpod Enterprise

Amazon Web Services (AWS)

Backstage - Gitpod Enterprise

Backstage

Gitpod can integrate with internal developer portals (IDP) such as Backstage and Port, supercharging your centralized software catalog with a better developer experience.

Internal Developer Portals - Gitpod Enterprise

Internal Developer Portals

Overview - Gitpod Enterprise

Installation Process - Gitpod Enterprise

Installation process

FAQs, Common issues and how to fix them when using Gitpod.

Troubleshooting

Welcome to the home of your new documentation

Introduction

Start building awesome documentation in under 5 minutes

Quickstart

Development

Text, title, and styling in standard markdown

Markdown Syntax

Code Blocks

Add image, video, and other HTML elements

Images and Embeds

Mintlify gives you complete control over the look and feel of your documentation using the mint.json file

Global Settings

The navigation field in mint.json defines the pages that go in the navigation menu

Navigation

Reusable, custom snippets to keep content in sync

Reusable Snippets

Example section for showcasing API endpoints

Returns all plants from the system that the user has access to

Get Plants

Create Plant

Deletes a single plant based on the ID supplied

Introduction

Configure

References

Integrations

Enterprise

Help