diff --git a/.env.example b/.env.example
index 2d5974f..0b9ea4b 100644
--- a/.env.example
+++ b/.env.example
@@ -10,7 +10,7 @@ NEXT_PUBLIC_APP_CONFIG="
 title: 'LiveKit Agents Playground'
 description: 'A virtual workbench for your multimodal AI agents.'
 github_link: 'https://github.com/livekit/agents-playground'
-video_fit: 'cover' # 'contain' or 'cover'
+video_fit: 'contain' # 'contain' or 'cover'
 settings:
   editable: true # Should the user be able to edit settings in-app
   theme_color: 'cyan'
diff --git a/src/components/playground/Playground.tsx b/src/components/playground/Playground.tsx
index fec3894..55b0561 100644
--- a/src/components/playground/Playground.tsx
+++ b/src/components/playground/Playground.tsx
@@ -117,7 +117,7 @@ export default function Playground({
   useDataChannel(onDataReceived);
 
   const videoTileContent = useMemo(() => {
-    const videoFitClassName = `object-${config.video_fit || "cover"}`;
+    const videoFitClassName = `object-${config.video_fit || "contain"}`;
 
     const disconnectedContent = (
       <div className="flex items-center justify-center text-gray-700 text-center w-full h-full">
diff --git a/src/hooks/useConfig.tsx b/src/hooks/useConfig.tsx
index eb47ce2..287acd4 100644
--- a/src/hooks/useConfig.tsx
+++ b/src/hooks/useConfig.tsx
@@ -47,7 +47,7 @@ export type UserSettings = {
 const defaultConfig: AppConfig = {
   title: "LiveKit Agents Playground",
   description: "A virtual workbench for testing multimodal AI agents.",
-  video_fit: "cover",
+  video_fit: "contain",
   settings: {
     editable: true,
     theme_color: "cyan",