chore(release): 7.5.0 [skip ci]

## [7.5.0](https://github.com/mediacms-io/mediacms/compare/v7.4.0...v7.5.0) (2026-02-06) ### Features * bump version ([36d815c](36d815c0cf))
feat: bump version
2026-03-20 19:58:30 -04:00 · 2026-02-06 17:26:12 +00:00 · 2026-02-06 19:25:31 +02:00 · 2026-02-06 17:24:27 +00:00 · 2026-02-06 19:23:51 +02:00 · 2026-02-06 16:56:49 +00:00
63 changed files with 13392 additions and 5098 deletions
--- a/.github/workflows/semantic-pull-request.yaml
+++ b/.github/workflows/semantic-pull-request.yaml
@@ -0,0 +1,22 @@
+name: "Lint PR"
+
+on:
+  pull_request_target:
+    types:
+      - opened
+      - edited
+      - synchronize
+      - reopened
+
+permissions:
+  pull-requests: read
+
+jobs:
+  main:
+    name: Validate PR title
+    runs-on: ubuntu-latest
+    environment: dev
+    steps:
+      - uses: amannn/action-semantic-pull-request@v5
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.github/workflows/semantic-release.yaml
+++ b/.github/workflows/semantic-release.yaml
@@ -0,0 +1,47 @@
+name: Semantic Release
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  issues: write
+
+jobs:
+  semantic-release:
+    runs-on: ubuntu-latest
+    environment: dev
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+          persist-credentials: false
+
+      - name: Setup SSH
+        uses: webfactory/ssh-agent@v0.8.0
+        with:
+          ssh-private-key: ${{ secrets.GA_DEPLOY_KEY }}
+
+      # use SSH url to ensure git commit using a deploy key bypasses the main
+      # branch protection rule
+      - name: Configure Git for SSH Push
+        run: git remote set-url origin "git@github.com:${{ github.repository }}.git"
+
+      - name: Setup Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "lts/*"
+
+      - name: Install Dependencies
+        run: npm clean-install
+
+      - name: Verify the integrity of provenance attestations and registry signatures for installed dependencies
+        run: npm audit signatures
+
+      - name: Run Semantic Release
+        run: npx semantic-release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
--- a/.prettierignore
+++ b/.prettierignore
@@ -1,3 +1,4 @@
 /templates/cms/*
 /templates/*.html
 *.scss
+/frontend/
--- a/.releaserc.json
+++ b/.releaserc.json
@@ -0,0 +1,100 @@
+{
+  "branches": [
+    "main"
+  ],
+  "plugins": [
+    [
+      "@semantic-release/commit-analyzer",
+      {
+        "preset": "conventionalcommits"
+      }
+    ],
+    [
+      "@semantic-release/release-notes-generator",
+      {
+        "preset": "conventionalcommits",
+        "presetConfig": {
+          "types": [
+            {
+              "type": "feat",
+              "section": "Features"
+            },
+            {
+              "type": "fix",
+              "section": "Bug Fixes"
+            },
+            {
+              "type": "chore",
+              "hidden": true
+            },
+            {
+              "type": "docs",
+              "section": "Documentation"
+            },
+            {
+              "type": "style",
+              "hidden": true
+            },
+            {
+              "type": "refactor",
+              "section": "Refactors"
+            },
+            {
+              "type": "perf",
+              "section": "Performance"
+            },
+            {
+              "type": "test",
+              "hidden": true
+            },
+            {
+              "type": "depr",
+              "section": "Deprecations"
+            }
+          ]
+        }
+      }
+    ],
+    [
+      "semantic-release-replace-plugin",
+      {
+        "replacements": [
+          {
+            "files": [
+              "package.json"
+            ],
+            "from": "\"version\": \".*\"",
+            "to": "\"version\": \"${nextRelease.version}\"",
+            "results": [
+              {
+                "file": "package.json",
+                "hasChanged": true,
+                "numMatches": 1,
+                "numReplacements": 1
+              }
+            ],
+            "countMatches": true
+          }
+        ]
+      }
+    ],
+    [
+      "@semantic-release/changelog",
+      {
+        "changelogFile": "CHANGELOG.md",
+        "changelogTitle": "# Changelog"
+      }
+    ],
+    "@semantic-release/github",
+    [
+      "@semantic-release/git",
+      {
+        "assets": [
+          "package.json",
+          "CHANGELOG.md"
+        ],
+        "message": "chore(release): ${nextRelease.version} [skip ci]\n\n${nextRelease.notes}"
+      }
+    ]
+  ]
+}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -0,0 +1,37 @@
+# Changelog
+
+## [7.5.0](https://github.com/mediacms-io/mediacms/compare/v7.4.0...v7.5.0) (2026-02-06)
+
+### Features
+
+* bump version ([36d815c](https://github.com/mediacms-io/mediacms/commit/36d815c0cfbe21d3136541d410d545742b9ebecd))
+
+## [7.4.0](https://github.com/mediacms-io/mediacms/compare/v7.3.0...v7.4.0) (2026-02-06)
+
+### Features
+
+* Add video player context menu with share/embed options ([#1472](https://github.com/mediacms-io/mediacms/issues/1472)) ([74952f6](https://github.com/mediacms-io/mediacms/commit/74952f68d79bc67617edb38eac62d2f5e7457565))
+
+## [7.3.0](https://github.com/mediacms-io/mediacms/compare/v7.2.0...v7.3.0) (2026-02-06)
+
+### Features
+
+* add package json for semantic release ([b405a04](https://github.com/mediacms-io/mediacms/commit/b405a04e346ca81b7d3f4e099eb984e7785cdd0f))
+* add semantic release github actions ([76a27ae](https://github.com/mediacms-io/mediacms/commit/76a27ae25609178c1bd47c947b9f1a082c791d61))
+* frontend unit tests ([1c15880](https://github.com/mediacms-io/mediacms/commit/1c15880ae3ef1ce77f53d5b473dfc0cc448b4977))
+* Implement persistent "Embed Mode" to hide UI shell via Session Storage ([#1484](https://github.com/mediacms-io/mediacms/issues/1484)) ([223e870](https://github.com/mediacms-io/mediacms/commit/223e87073f7d5e44130c9976854cac670db0ae66))
+* Improve Visual Distinction Between Trim and Chapters Editors ([#1445](https://github.com/mediacms-io/mediacms/issues/1445)) ([d9b1d6c](https://github.com/mediacms-io/mediacms/commit/d9b1d6cab1d2bdfc16f799a0a27b64313e2e0d22))
+* semantic release ([b76282f](https://github.com/mediacms-io/mediacms/commit/b76282f9e465a39c2da5e9a22184d1db23de3f56))
+
+### Bug Fixes
+
+* add delay to task creation ([1b3cdfd](https://github.com/mediacms-io/mediacms/commit/1b3cdfd302abc5e69ebe01ca52b5091f3b24c0b2))
+* Add regex denoter and improve celerybeat gitignore ([#1446](https://github.com/mediacms-io/mediacms/issues/1446)) ([90331f3](https://github.com/mediacms-io/mediacms/commit/90331f3b4a2a5737de9dd75ab45c096944813c42))
+* adjust poster url for audio ([01912ea](https://github.com/mediacms-io/mediacms/commit/01912ea1f99ef43793a65712539d6264f1f6410f))
+* Chapter numbering and preserve custom titles on segment reorder ([#1435](https://github.com/mediacms-io/mediacms/issues/1435)) ([cd7dd4f](https://github.com/mediacms-io/mediacms/commit/cd7dd4f72c9f0bac466c680f686a9ecfdd3a38dd))
+* Show default chapter names in textarea instead of placeholder text ([#1428](https://github.com/mediacms-io/mediacms/issues/1428)) ([5eb6faf](https://github.com/mediacms-io/mediacms/commit/5eb6fafb8c6928b8bc3fe5f0c7af315273f78a55))
+* static files ([#1429](https://github.com/mediacms-io/mediacms/issues/1429)) ([ba2c31b](https://github.com/mediacms-io/mediacms/commit/ba2c31b1e65b7f508dee598b1f2d86f01f9bf036))
+
+### Documentation
+
+* update page link ([aeef828](https://github.com/mediacms-io/mediacms/commit/aeef8284bfba2a9a7f69c684f96c54f0e0e0cf92))
--- a/cms/version.py
+++ b/cms/version.py
@@ -1 +1 @@
-VERSION = "7.6"
+VERSION = "7.5"
--- a/frontend-tools/video-js/examples/full-screen-video.html
+++ b/frontend-tools/video-js/examples/full-screen-video.html
@@ -0,0 +1,34 @@
+<!DOCTYPE html>
+<html lang="en" style="height: 100%">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>Embedded Video - Full Screen</title>
+        <style>
+            body {
+                margin: 0;
+                padding: 0;
+                min-height: 100vh;
+                display: flex;
+                align-items: center;
+                justify-content: center;
+                background-color: #000;
+                overflow: hidden;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe
+            src="https://demo.mediacms.io/embed?m=zK2nirNLC"
+            style="
+                width: 100%;
+                max-width: calc(100vh * 16 / 9);
+                aspect-ratio: 16 / 9;
+                display: block;
+                margin: auto;
+                border: 0;
+            "
+            allowfullscreen
+        ></iframe>
+    </body>
+</html>
--- a/frontend-tools/video-js/src/components/controls/SeekIndicator.js
+++ b/frontend-tools/video-js/src/components/controls/SeekIndicator.js
@@ -204,6 +204,54 @@ class SeekIndicator extends Component {
    </div>
  `;
            textEl.textContent = 'Pause';
+        } else if (direction === 'copy-url') {
+            iconEl.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: center; animation: youtubeSeekPulse 0.3s ease-out;">
+      <div style="
+          width: ${circleSize};
+          height: ${circleSize};
+          border-radius: 50%;
+          background: rgba(0, 0, 0, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          outline: none;
+          box-sizing: border-box;
+          overflow: hidden;
+      ">
+        <svg viewBox="0 0 24 24" width="${iconSize}" height="${iconSize}" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style="filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));">
+          <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"/>
+          <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"/>
+        </svg>
+      </div>
+    </div>
+  `;
+            textEl.textContent = '';
+        } else if (direction === 'copy-embed') {
+            iconEl.innerHTML = `
+    <div style="display: flex; align-items: center; justify-content: center; animation: youtubeSeekPulse 0.3s ease-out;">
+      <div style="
+          width: ${circleSize};
+          height: ${circleSize};
+          border-radius: 50%;
+          background: rgba(0, 0, 0, 0.3);
+          display: flex;
+          align-items: center;
+          justify-content: center;
+          border: none;
+          outline: none;
+          box-sizing: border-box;
+          overflow: hidden;
+      ">
+        <svg viewBox="0 0 24 24" width="${iconSize}" height="${iconSize}" fill="none" stroke="white" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" style="filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));">
+          <path d="M16 18l6-6-6-6"/>
+          <path d="M8 6l-6 6 6 6"/>
+        </svg>
+      </div>
+    </div>
+  `;
+            textEl.textContent = '';
        }

        // Clear any text content in the text element
@@ -239,6 +287,11 @@ class SeekIndicator extends Component {
            this.showTimeout = setTimeout(() => {
                this.hide();
            }, 500);
+        } else if (direction === 'copy-url' || direction === 'copy-embed') {
+            // Copy operations: 500ms (same as play/pause)
+            this.showTimeout = setTimeout(() => {
+                this.hide();
+            }, 500);
        }
    }

--- a/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
+++ b/frontend-tools/video-js/src/components/overlays/EmbedInfoOverlay.js
@@ -14,10 +14,22 @@ class EmbedInfoOverlay extends Component {
        this.authorThumbnail = options.authorThumbnail || '';
        this.videoTitle = options.videoTitle || 'Video';
        this.videoUrl = options.videoUrl || '';
+        this.showTitle = options.showTitle !== undefined ? options.showTitle : true;
+        this.showRelated = options.showRelated !== undefined ? options.showRelated : true;
+        this.showUserAvatar = options.showUserAvatar !== undefined ? options.showUserAvatar : true;
+        this.linkTitle = options.linkTitle !== undefined ? options.linkTitle : true;

        // Initialize after player is ready
        this.player().ready(() => {
+            if (this.showTitle) {
                this.createOverlay();
+            } else {
+                // Hide overlay element if showTitle is false
+                const overlay = this.el();
+                overlay.style.display = 'none';
+                overlay.style.opacity = '0';
+                overlay.style.visibility = 'hidden';
+            }
        });
    }

@@ -49,7 +61,7 @@ class EmbedInfoOverlay extends Component {
        `;

        // Create avatar container
-        if (this.authorThumbnail) {
+        if (this.authorThumbnail && this.showUserAvatar) {
            const avatarContainer = document.createElement('div');
            avatarContainer.className = 'embed-avatar-container';
            avatarContainer.style.cssText = `
@@ -125,7 +137,7 @@ class EmbedInfoOverlay extends Component {
            overflow: hidden;
        `;

-        if (this.videoUrl) {
+        if (this.videoUrl && this.linkTitle) {
            const titleLink = document.createElement('a');
            titleLink.href = this.videoUrl;
            titleLink.target = '_blank';
@@ -186,10 +198,16 @@ class EmbedInfoOverlay extends Component {
        const player = this.player();
        const overlay = this.el();

+        // If showTitle is false, ensure overlay is hidden
+        if (!this.showTitle) {
+            overlay.style.display = 'none';
+            overlay.style.opacity = '0';
+            overlay.style.visibility = 'hidden';
+            return;
+        }
+
        // Sync overlay visibility with control bar visibility
        const updateOverlayVisibility = () => {
-            const controlBar = player.getChild('controlBar');
-
            if (!player.hasStarted()) {
                // Show overlay when video hasn't started (poster is showing) - like before
                overlay.style.opacity = '1';
--- a/frontend-tools/video-js/src/components/overlays/VideoContextMenu.css
+++ b/frontend-tools/video-js/src/components/overlays/VideoContextMenu.css
@@ -0,0 +1,47 @@
+.video-context-menu {
+    position: fixed;
+    background-color: #282828;
+    border-radius: 4px;
+    padding: 4px 0;
+    min-width: 240px;
+    z-index: 10000;
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
+}
+
+.video-context-menu-item {
+    display: flex;
+    align-items: center;
+    padding: 10px 16px;
+    color: #ffffff;
+    cursor: pointer;
+    transition: background-color 0.15s ease;
+    font-size: 14px;
+    user-select: none;
+}
+
+.video-context-menu-item:hover {
+    background-color: #3d3d3d;
+}
+
+.video-context-menu-item:active {
+    background-color: #4a4a4a;
+}
+
+.video-context-menu-icon {
+    width: 18px;
+    height: 18px;
+    margin-right: 12px;
+    flex-shrink: 0;
+    stroke: currentColor;
+    fill: none;
+    stroke-width: 2;
+    stroke-linecap: round;
+    stroke-linejoin: round;
+}
+
+.video-context-menu-item span {
+    flex: 1;
+    white-space: nowrap;
+}
+
--- a/frontend-tools/video-js/src/components/overlays/VideoContextMenu.jsx
+++ b/frontend-tools/video-js/src/components/overlays/VideoContextMenu.jsx
@@ -0,0 +1,85 @@
+import React, { useEffect, useRef } from 'react';
+import './VideoContextMenu.css';
+
+function VideoContextMenu({ visible, position, onClose, onCopyVideoUrl, onCopyVideoUrlAtTime, onCopyEmbedCode }) {
+    const menuRef = useRef(null);
+
+    useEffect(() => {
+        if (visible && menuRef.current) {
+            // Position the menu
+            menuRef.current.style.left = `${position.x}px`;
+            menuRef.current.style.top = `${position.y}px`;
+
+            // Adjust if menu goes off screen
+            const rect = menuRef.current.getBoundingClientRect();
+            const windowWidth = window.innerWidth;
+            const windowHeight = window.innerHeight;
+
+            if (rect.right > windowWidth) {
+                menuRef.current.style.left = `${position.x - rect.width}px`;
+            }
+            if (rect.bottom > windowHeight) {
+                menuRef.current.style.top = `${position.y - rect.height}px`;
+            }
+        }
+    }, [visible, position]);
+
+    useEffect(() => {
+        const handleClickOutside = (e) => {
+            if (visible && menuRef.current && !menuRef.current.contains(e.target)) {
+                onClose();
+            }
+        };
+
+        const handleEscape = (e) => {
+            if (e.key === 'Escape' && visible) {
+                onClose();
+            }
+        };
+
+        if (visible) {
+            // Use capture phase to catch events earlier, before they can be stopped
+            // Listen to both mousedown and click to ensure we catch all clicks
+            document.addEventListener('mousedown', handleClickOutside, true);
+            document.addEventListener('click', handleClickOutside, true);
+            document.addEventListener('keydown', handleEscape);
+        }
+
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside, true);
+            document.removeEventListener('click', handleClickOutside, true);
+            document.removeEventListener('keydown', handleEscape);
+        };
+    }, [visible, onClose]);
+
+    if (!visible) return null;
+
+    return (
+        <div ref={menuRef} className="video-context-menu" onClick={(e) => e.stopPropagation()}>
+            <div className="video-context-menu-item" onClick={onCopyVideoUrl}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy video URL</span>
+            </div>
+            <div className="video-context-menu-item" onClick={onCopyVideoUrlAtTime}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy video URL at current time</span>
+            </div>
+            <div className="video-context-menu-item" onClick={onCopyEmbedCode}>
+                <svg className="video-context-menu-icon" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <path d="M16 18l6-6-6-6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                    <path d="M8 6l-6 6 6 6" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+                <span>Copy embed code</span>
+            </div>
+        </div>
+    );
+}
+
+export default VideoContextMenu;
+
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef, useMemo } from 'react';
+import React, { useEffect, useRef, useMemo, useState, useCallback } from 'react';
 import videojs from 'video.js';
 import 'video.js/dist/video-js.css';
 import '../../styles/embed.css';
@@ -17,6 +17,7 @@ import CustomRemainingTime from '../controls/CustomRemainingTime';
 import CustomChaptersOverlay from '../controls/CustomChaptersOverlay';
 import CustomSettingsMenu from '../controls/CustomSettingsMenu';
 import SeekIndicator from '../controls/SeekIndicator';
+import VideoContextMenu from '../overlays/VideoContextMenu';
 import UserPreferences from '../../utils/UserPreferences';
 import PlayerConfig from '../../config/playerConfig';
 import { AutoplayHandler } from '../../utils/AutoplayHandler';
@@ -169,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
    }, 500); // Delay to ensure all components are ready
 };

-function VideoJSPlayer({ videoId = 'default-video' }) {
+function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true, urlTimestamp = null }) {
    const videoRef = useRef(null);
    const playerRef = useRef(null); // Track the player instance
    const userPreferences = useRef(new UserPreferences()); // User preferences instance
@@ -177,25 +178,17 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
    const keyboardHandler = useRef(null); // Keyboard handler instance
    const playbackEventHandler = useRef(null); // Playback event handler instance

+    // Context menu state
+    const [contextMenuVisible, setContextMenuVisible] = useState(false);
+    const [contextMenuPosition, setContextMenuPosition] = useState({ x: 0, y: 0 });
+
    // Check if this is an embed player (disable next video and autoplay features)
    const isEmbedPlayer = videoId === 'video-embed';

-    // Utility function to detect touch devices
-    const isTouchDevice = useMemo(() => {
-        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-    }, []);
-
-    // Utility function to detect iOS devices
-    const isIOS = useMemo(() => {
-        return (
-            /iPad|iPhone|iPod/.test(navigator.userAgent) ||
-            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
-        );
-    }, []);
-
    // Environment-based development mode configuration
    const isDevMode = import.meta.env.VITE_DEV_MODE === 'true' || window.location.hostname.includes('vercel.app');
-    // Safely access window.MEDIA_DATA with fallback using useMemo
+
+    // Read options from window.MEDIA_DATA if available (for consistency with embed logic)
    const mediaData = useMemo(
        () =>
            typeof window !== 'undefined' && window.MEDIA_DATA
@@ -214,12 +207,37 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                      },
                      siteUrl: 'https://deic.mediacms.io',
                      nextLink: 'https://deic.mediacms.io/view?m=elygiagorgechania',
-                      urlAutoplay: true,
-                      urlMuted: false,
                  },
        []
    );

+    // Helper to get effective value (prop or MEDIA_DATA or default)
+    const getOption = (propKey, mediaDataKey, defaultValue) => {
+        if (isEmbedPlayer) {
+            if (mediaData[mediaDataKey] !== undefined) return mediaData[mediaDataKey];
+        }
+        return propKey !== undefined ? propKey : defaultValue;
+    };
+
+    const finalShowTitle = getOption(showTitle, 'showTitle', true);
+    const finalShowRelated = getOption(showRelated, 'showRelated', true);
+    const finalShowUserAvatar = getOption(showUserAvatar, 'showUserAvatar', true);
+    const finalLinkTitle = getOption(linkTitle, 'linkTitle', true);
+    const finalTimestamp = getOption(urlTimestamp, 'urlTimestamp', null);
+
+    // Utility function to detect touch devices
+    const isTouchDevice = useMemo(() => {
+        return 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
+    }, []);
+
+    // Utility function to detect iOS devices
+    const isIOS = useMemo(() => {
+        return (
+            /iPad|iPhone|iPod/.test(navigator.userAgent) ||
+            (navigator.platform === 'MacIntel' && navigator.maxTouchPoints > 1)
+        );
+    }, []);
+
    // Define chapters as JSON object
    // Note: The sample-chapters.vtt file is no longer needed as chapters are now loaded from this JSON
    // CONDITIONAL LOGIC:
@@ -531,8 +549,6 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
            isPlayList: mediaData?.isPlayList,
            related_media: mediaData.data?.related_media || [],
            nextLink: mediaData?.nextLink || null,
-            urlAutoplay: mediaData?.urlAutoplay || true,
-            urlMuted: mediaData?.urlMuted || false,
            sources: getVideoSources(),
        };

@@ -738,6 +754,212 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
        }
    };

+    // Context menu handlers
+    const handleContextMenu = useCallback((e) => {
+        // Only handle if clicking on video player area
+        const target = e.target;
+        const isVideoPlayerArea =
+            target.closest('.video-js') ||
+            target.classList.contains('vjs-tech') ||
+            target.tagName === 'VIDEO' ||
+            target.closest('video');
+
+        if (isVideoPlayerArea) {
+            e.preventDefault();
+            e.stopPropagation();
+
+            setContextMenuPosition({ x: e.clientX, y: e.clientY });
+            setContextMenuVisible(true);
+        }
+    }, []);
+
+    const closeContextMenu = () => {
+        setContextMenuVisible(false);
+    };
+
+    // Helper function to get media ID
+    const getMediaId = () => {
+        if (typeof window !== 'undefined' && window.MEDIA_DATA?.data?.friendly_token) {
+            return window.MEDIA_DATA.data.friendly_token;
+        }
+        if (mediaData?.data?.friendly_token) {
+            return mediaData.data.friendly_token;
+        }
+        // Try to get from URL (works for both main page and embed page)
+        if (typeof window !== 'undefined') {
+            const urlParams = new URLSearchParams(window.location.search);
+            const mediaIdFromUrl = urlParams.get('m');
+            if (mediaIdFromUrl) {
+                return mediaIdFromUrl;
+            }
+            // Also check if we're on an embed page with media ID in path
+            const pathMatch = window.location.pathname.match(/\/embed\/([^/?]+)/);
+            if (pathMatch) {
+                return pathMatch[1];
+            }
+        }
+        return currentVideo.id || 'default-video';
+    };
+
+    // Helper function to get base origin URL (handles embed mode)
+    const getBaseOrigin = () => {
+        if (typeof window !== 'undefined') {
+            // In embed mode, try to get origin from parent window if possible
+            // Otherwise use current window origin
+            try {
+                // Check if we're in an iframe and can access parent
+                if (window.parent !== window && window.parent.location.origin) {
+                    return window.parent.location.origin;
+                }
+            } catch {
+                // Cross-origin iframe, use current origin
+            }
+            return window.location.origin;
+        }
+        return mediaData.siteUrl || 'https://deic.mediacms.io';
+    };
+
+    // Helper function to get embed URL
+    const getEmbedUrl = () => {
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+
+        // Try to get embed URL from config or construct it
+        if (typeof window !== 'undefined' && window.MediaCMS?.config?.url?.embed) {
+            return window.MediaCMS.config.url.embed + mediaId;
+        }
+
+        // Fallback: construct embed URL (check if current URL is embed format)
+        if (typeof window !== 'undefined' && window.location.pathname.includes('/embed')) {
+            // If we're already on an embed page, use current URL format
+            const currentUrl = new URL(window.location.href);
+            currentUrl.searchParams.set('m', mediaId);
+            return currentUrl.toString();
+        }
+
+        // Default embed URL format
+        return `${origin}/embed?m=${mediaId}`;
+    };
+
+    // Copy video URL to clipboard
+    const handleCopyVideoUrl = async () => {
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+        const videoUrl = `${origin}/view?m=${mediaId}`;
+
+        // Show copy icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-url');
+        }
+
+        try {
+            await navigator.clipboard.writeText(videoUrl);
+            closeContextMenu();
+            // You can add a notification here if needed
+        } catch (err) {
+            console.error('Failed to copy video URL:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = videoUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Copy video URL at current time to clipboard
+    const handleCopyVideoUrlAtTime = async () => {
+        if (!playerRef.current) {
+            closeContextMenu();
+            return;
+        }
+
+        const currentTime = Math.floor(playerRef.current.currentTime() || 0);
+        const mediaId = getMediaId();
+        const origin = getBaseOrigin();
+        const videoUrl = `${origin}/view?m=${mediaId}&t=${currentTime}`;
+
+        // Show copy icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-url');
+        }
+
+        try {
+            await navigator.clipboard.writeText(videoUrl);
+            closeContextMenu();
+        } catch (err) {
+            console.error('Failed to copy video URL at time:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = videoUrl;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Copy embed code to clipboard
+    const handleCopyEmbedCode = async () => {
+        const embedUrl = getEmbedUrl();
+        const embedCode = `<iframe width="560" height="315" src="${embedUrl}" frameborder="0" allowfullscreen></iframe>`;
+
+        // Show copy embed icon
+        if (customComponents.current?.seekIndicator) {
+            customComponents.current.seekIndicator.show('copy-embed');
+        }
+
+        try {
+            await navigator.clipboard.writeText(embedCode);
+            closeContextMenu();
+        } catch (err) {
+            console.error('Failed to copy embed code:', err);
+            // Fallback for older browsers
+            const textArea = document.createElement('textarea');
+            textArea.value = embedCode;
+            document.body.appendChild(textArea);
+            textArea.select();
+            document.execCommand('copy');
+            document.body.removeChild(textArea);
+            closeContextMenu();
+        }
+    };
+
+    // Add context menu handler directly to video element and document (works before and after Video.js initialization)
+    useEffect(() => {
+        const videoElement = videoRef.current;
+
+        // Attach to document with capture to catch all contextmenu events, then filter
+        const documentHandler = (e) => {
+            // Check if the event originated from within the video player
+            const target = e.target;
+            const playerWrapper =
+                videoElement?.closest('.video-js') || document.querySelector(`#${videoId}`)?.closest('.video-js');
+
+            if (playerWrapper && (playerWrapper.contains(target) || target === playerWrapper)) {
+                handleContextMenu(e);
+            }
+        };
+
+        // Use capture phase on document to catch before anything else
+        document.addEventListener('contextmenu', documentHandler, true);
+
+        // Also attach directly to video element
+        if (videoElement) {
+            videoElement.addEventListener('contextmenu', handleContextMenu, true);
+        }
+
+        return () => {
+            document.removeEventListener('contextmenu', documentHandler, true);
+            if (videoElement) {
+                videoElement.removeEventListener('contextmenu', handleContextMenu, true);
+            }
+        };
+    }, [handleContextMenu, videoId]);
+
    useEffect(() => {
        // Only initialize if we don't already have a player and element exists
        if (videoRef.current && !playerRef.current) {
@@ -1078,6 +1300,9 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                        currentVideo,
                        relatedVideos,
                        goToNextVideo,
+                        showRelated: finalShowRelated,
+                        showUserAvatar: finalShowUserAvatar,
+                        linkTitle: finalLinkTitle,
                    });
                    customComponents.current.endScreenHandler = endScreenHandler; // Store for cleanup

@@ -1098,8 +1323,8 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                    }

                    // Handle URL timestamp parameter
-                    if (mediaData.urlTimestamp !== null && mediaData.urlTimestamp >= 0) {
-                        const timestamp = mediaData.urlTimestamp;
+                    if (finalTimestamp !== null && finalTimestamp >= 0) {
+                        const timestamp = finalTimestamp;

                        // Wait for video metadata to be loaded before seeking
                        if (playerRef.current.readyState() >= 1) {
@@ -1997,6 +2222,10 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                            authorThumbnail: currentVideo.author_thumbnail,
                            videoTitle: currentVideo.title,
                            videoUrl: currentVideo.url,
+                            showTitle: finalShowTitle,
+                            showRelated: finalShowRelated,
+                            showUserAvatar: finalShowUserAvatar,
+                            linkTitle: finalLinkTitle,
                        });
                    }
                    // END: Add Embed Info Overlay Component
@@ -2083,20 +2312,72 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                        // Make the video element focusable
                        const videoElement = playerRef.current.el();
                        videoElement.setAttribute('tabindex', '0');
+                        
+                        if (!isEmbedPlayer) {
                            videoElement.focus();
                        }
+
+                        // Add context menu (right-click) handler to the player wrapper and video element
+                        // Attach to player wrapper (this catches all clicks on the player)
+                        videoElement.addEventListener('contextmenu', handleContextMenu, true);
+
+                        // Also try to attach to the actual video tech element
+                        const attachContextMenu = () => {
+                            const techElement =
+                                playerRef.current.el().querySelector('.vjs-tech') ||
+                                playerRef.current.el().querySelector('video') ||
+                                (playerRef.current.tech() && playerRef.current.tech().el());
+
+                            if (techElement && techElement !== videoRef.current && techElement !== videoElement) {
+                                // Use capture phase to catch before Video.js might prevent it
+                                techElement.addEventListener('contextmenu', handleContextMenu, true);
+                                return true;
+                            }
+                            return false;
+                        };
+
+                        // Try to attach immediately
+                        attachContextMenu();
+
+                        // Also try after a short delay in case elements aren't ready yet
+                        setTimeout(() => {
+                            attachContextMenu();
+                        }, 100);
+
+                        // Also try when video is loaded
+                        playerRef.current.one('loadedmetadata', () => {
+                            attachContextMenu();
+                        });
+                    }
                });
            }
            //}, 0);
        }
+
+        // Cleanup: Remove context menu event listener
+        return () => {
+            if (playerRef.current && playerRef.current.el()) {
+                const playerEl = playerRef.current.el();
+                playerEl.removeEventListener('contextmenu', handleContextMenu, true);
+
+                const techElement =
+                    playerEl.querySelector('.vjs-tech') ||
+                    playerEl.querySelector('video') ||
+                    (playerRef.current.tech() && playerRef.current.tech().el());
+                if (techElement) {
+                    techElement.removeEventListener('contextmenu', handleContextMenu, true);
+                }
+            }
+        };
    }, []);

    return (
+        <>
            <video
                ref={videoRef}
                id={videoId}
                controls={true}
-            className={`video-js vjs-fluid vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
+                className={`video-js ${isEmbedPlayer ? 'vjs-fill' : 'vjs-fluid'} vjs-default-skin${currentVideo.useRoundedCorners ? ' video-js-rounded-corners' : ''}`}
                preload="auto"
                poster={currentVideo.poster}
                tabIndex="0"
@@ -2129,6 +2410,15 @@ function VideoJSPlayer({ videoId = 'default-video' }) {
                    chaptersData.length > 0 &&
                    (console.log('chaptersData', chaptersData), (<track kind="chapters" src="/sample-chapters.vtt" />))} */}
            </video>
+            <VideoContextMenu
+                visible={contextMenuVisible}
+                position={contextMenuPosition}
+                onClose={closeContextMenu}
+                onCopyVideoUrl={handleCopyVideoUrl}
+                onCopyVideoUrlAtTime={handleCopyVideoUrlAtTime}
+                onCopyEmbedCode={handleCopyEmbedCode}
+            />
+        </>
    );
 }

--- a/frontend-tools/video-js/src/utils/EndScreenHandler.js
+++ b/frontend-tools/video-js/src/utils/EndScreenHandler.js
@@ -63,7 +63,17 @@ export class EndScreenHandler {
    }

    handleVideoEnded() {
-        const { isEmbedPlayer, userPreferences, mediaData, currentVideo, relatedVideos, goToNextVideo } = this.options;
+        const {
+            isEmbedPlayer,
+            userPreferences,
+            mediaData,
+            currentVideo,
+            relatedVideos,
+            goToNextVideo,
+            showRelated,
+            showUserAvatar,
+            linkTitle,
+        } = this.options;

        // For embed players, show big play button when video ends
        if (isEmbedPlayer) {
@@ -73,6 +83,34 @@ export class EndScreenHandler {
            }
        }

+        // If showRelated is false, we don't show the end screen or autoplay countdown
+        if (showRelated === false) {
+            // But we still want to keep the control bar visible and hide the poster
+            setTimeout(() => {
+                if (this.player && !this.player.isDisposed()) {
+                    const playerEl = this.player.el();
+                    if (playerEl) {
+                        // Hide poster elements
+                        const posterElements = playerEl.querySelectorAll('.vjs-poster');
+                        posterElements.forEach((posterEl) => {
+                            posterEl.style.display = 'none';
+                            posterEl.style.visibility = 'hidden';
+                            posterEl.style.opacity = '0';
+                        });
+
+                        // Keep control bar visible
+                        const controlBar = this.player.getChild('controlBar');
+                        if (controlBar) {
+                            controlBar.show();
+                            controlBar.el().style.opacity = '1';
+                            controlBar.el().style.pointerEvents = 'auto';
+                        }
+                    }
+                }
+            }, 50);
+            return;
+        }
+
        // Keep controls active after video ends
        setTimeout(() => {
            if (this.player && !this.player.isDisposed()) {
--- a/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
+++ b/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
@@ -31,8 +31,11 @@ const VideoJSEmbed = ({
    poster,
    previewSprite,
    subtitlesInfo,
-    enableAutoplay,
    inEmbed,
+    showTitle,
+    showRelated,
+    showUserAvatar,
+    linkTitle,
    hasTheaterMode,
    hasNextLink,
    nextLink,
@@ -62,8 +65,10 @@ const VideoJSEmbed = ({
        if (typeof window !== 'undefined') {
            // Get URL parameters for autoplay, muted, and timestamp
            const urlTimestamp = getUrlParameter('t');
-            const urlAutoplay = getUrlParameter('autoplay');
            const urlMuted = getUrlParameter('muted');
+            const urlShowRelated = getUrlParameter('showRelated');
+            const urlShowUserAvatar = getUrlParameter('showUserAvatar');
+            const urlLinkTitle = getUrlParameter('linkTitle');
            
            window.MEDIA_DATA = {
                data: data || {}, 
@@ -71,7 +76,7 @@ const VideoJSEmbed = ({
                version: version,
                isPlayList: isPlayList,
                playerVolume: playerVolume || 0.5,
-                playerSoundMuted: playerSoundMuted || (urlMuted === '1'),
+                playerSoundMuted: urlMuted === '1',
                videoQuality: videoQuality || 'auto',
                videoPlaybackSpeed: videoPlaybackSpeed || 1,
                inTheaterMode: inTheaterMode || false,
@@ -83,8 +88,11 @@ const VideoJSEmbed = ({
                poster: poster || '',
                previewSprite: previewSprite || null,
                subtitlesInfo: subtitlesInfo || [],
-                enableAutoplay: enableAutoplay || (urlAutoplay === '1'),
                inEmbed: inEmbed || false,
+                showTitle: showTitle || false,
+                showRelated: showRelated !== undefined ? showRelated : (urlShowRelated === '1' || urlShowRelated === 'true' || urlShowRelated === null),
+                showUserAvatar: showUserAvatar !== undefined ? showUserAvatar : (urlShowUserAvatar === '1' || urlShowUserAvatar === 'true' || urlShowUserAvatar === null),
+                linkTitle: linkTitle !== undefined ? linkTitle : (urlLinkTitle === '1' || urlLinkTitle === 'true' || urlLinkTitle === null),
                hasTheaterMode: hasTheaterMode || false,
                hasNextLink: hasNextLink || false,
                nextLink: nextLink || null,
@@ -92,8 +100,10 @@ const VideoJSEmbed = ({
                errorMessage: errorMessage || '',
                // URL parameters
                urlTimestamp: urlTimestamp ? parseInt(urlTimestamp, 10) : null,
-                urlAutoplay: urlAutoplay === '1',
                urlMuted: urlMuted === '1',
+                urlShowRelated: urlShowRelated === '1' || urlShowRelated === 'true',
+                urlShowUserAvatar: urlShowUserAvatar === '1' || urlShowUserAvatar === 'true',
+                urlLinkTitle: urlLinkTitle === '1' || urlLinkTitle === 'true',
                onClickNextCallback: onClickNextCallback || null,
                onClickPreviousCallback: onClickPreviousCallback || null,
                onStateUpdateCallback: onStateUpdateCallback || null,
@@ -176,12 +186,18 @@ const VideoJSEmbed = ({
                    // Scroll to the video player with smooth behavior
                    const videoElement = document.querySelector(inEmbedRef.current ? '#video-embed' : '#video-main');
                    if (videoElement) {
+                        const urlScroll = getUrlParameter('scroll');
+                        const isIframe = window.parent !== window;
+                        
+                        // Only scroll if not in an iframe, OR if explicitly requested via scroll=1 parameter
+                        if (!isIframe || urlScroll === '1' || urlScroll === 'true') {
                            videoElement.scrollIntoView({ 
                                behavior: 'smooth', 
                                block: 'center',
                                inline: 'nearest'
                            });
                        }
+                    }
                } else {
                    console.warn('VideoJS player not found for timestamp navigation');
                }
@@ -220,7 +236,14 @@ const VideoJSEmbed = ({

    return (
        <div className="video-js-wrapper" ref={containerRef}>
-            {inEmbed ? <div id="video-js-root-embed" className="video-js-root-embed" /> : <div id="video-js-root-main" className="video-js-root-main" />}
+            {inEmbed ? (
+                <div 
+                    id="video-js-root-embed" 
+                    className="video-js-root-embed"
+                />
+            ) : (
+                <div id="video-js-root-main" className="video-js-root-main" />
+            )}
        </div>
    );
 };
--- a/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
+++ b/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
@@ -4,10 +4,32 @@ import { LinksContext, SiteConsumer } from '../../utils/contexts/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { PageActions, MediaPageActions } from '../../utils/actions/';
 import { CircleIconButton, MaterialIcon, NumericInputWithUnit } from '../_shared/';
-import VideoViewer from '../media-viewer/VideoViewer';
+
+const EMBED_OPTIONS_STORAGE_KEY = 'mediacms_embed_options';
+
+function loadEmbedOptions() {
+  try {
+    const saved = localStorage.getItem(EMBED_OPTIONS_STORAGE_KEY);
+    if (saved) {
+      return JSON.parse(saved);
+    }
+  } catch (e) {
+    // Ignore localStorage errors
+  }
+  return null;
+}
+
+function saveEmbedOptions(options) {
+  try {
+    localStorage.setItem(EMBED_OPTIONS_STORAGE_KEY, JSON.stringify(options));
+  } catch (e) {
+    // Ignore localStorage errors
+  }
+}

 export function MediaShareEmbed(props) {
  const embedVideoDimensions = PageStore.get('config-options').embedded.video.dimensions;
+  const savedOptions = loadEmbedOptions();

  const links = useContext(LinksContext);

@@ -18,12 +40,19 @@ export function MediaShareEmbed(props) {
  const onRightBottomRef = useRef(null);

  const [maxHeight, setMaxHeight] = useState(window.innerHeight - 144 + 56);
-  const [keepAspectRatio, setKeepAspectRatio] = useState(false);
-  const [aspectRatio, setAspectRatio] = useState('16:9');
-  const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
-  const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
-  const [embedHeightValue, setEmbedHeightValue] = useState(embedVideoDimensions.height);
-  const [embedHeightUnit, setEmbedHeightUnit] = useState(embedVideoDimensions.heightUnit);
+  const [keepAspectRatio, setKeepAspectRatio] = useState(savedOptions?.keepAspectRatio ?? true);
+  const [showTitle, setShowTitle] = useState(savedOptions?.showTitle ?? true);
+  const [showRelated, setShowRelated] = useState(savedOptions?.showRelated ?? true);
+  const [showUserAvatar, setShowUserAvatar] = useState(savedOptions?.showUserAvatar ?? true);
+  const [linkTitle, setLinkTitle] = useState(savedOptions?.linkTitle ?? true);
+  const [responsive, setResponsive] = useState(savedOptions?.responsive ?? false);
+  const [startAt, setStartAt] = useState(false);
+  const [startTime, setStartTime] = useState('0:00');
+  const [aspectRatio, setAspectRatio] = useState(savedOptions?.aspectRatio ?? '16:9');
+  const [embedWidthValue, setEmbedWidthValue] = useState(savedOptions?.embedWidthValue ?? embedVideoDimensions.width);
+  const [embedWidthUnit, setEmbedWidthUnit] = useState(savedOptions?.embedWidthUnit ?? embedVideoDimensions.widthUnit);
+  const [embedHeightValue, setEmbedHeightValue] = useState(savedOptions?.embedHeightValue ?? embedVideoDimensions.height);
+  const [embedHeightUnit, setEmbedHeightUnit] = useState(savedOptions?.embedHeightUnit ?? embedVideoDimensions.heightUnit);
  const [rightMiddlePositionTop, setRightMiddlePositionTop] = useState(60);
  const [rightMiddlePositionBottom, setRightMiddlePositionBottom] = useState(60);
  const [unitOptions, setUnitOptions] = useState([
@@ -71,36 +100,65 @@ export function MediaShareEmbed(props) {
    setEmbedHeightUnit(newVal);
  }

-  function onKeepAspectRatioChange() {
-    const newVal = !keepAspectRatio;
+  function onShowTitleChange() {
+    setShowTitle(!showTitle);
+  }

+  function onShowRelatedChange() {
+    setShowRelated(!showRelated);
+  }
+
+  function onShowUserAvatarChange() {
+    setShowUserAvatar(!showUserAvatar);
+  }
+
+  function onLinkTitleChange() {
+    setLinkTitle(!linkTitle);
+  }
+
+  function onResponsiveChange() {
+    const nextResponsive = !responsive;
+    setResponsive(nextResponsive);
+
+    if (!nextResponsive) {
+      if (aspectRatio !== 'custom') {
        const arr = aspectRatio.split(':');
        const x = arr[0];
        const y = arr[1];

-    setKeepAspectRatio(newVal);
-    setEmbedWidthUnit(newVal ? 'px' : embedWidthUnit);
-    setEmbedHeightUnit(newVal ? 'px' : embedHeightUnit);
-    setEmbedHeightValue(newVal ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue);
-    setUnitOptions(
-      newVal
-        ? [{ key: 'px', label: 'px' }]
-        : [
-          { key: 'px', label: 'px' },
-          { key: 'percent', label: '%' },
-        ]
-    );
+        setKeepAspectRatio(true);
+        setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
+      } else {
+        setKeepAspectRatio(false);
+      }
+    } else {
+      setKeepAspectRatio(false);
+    }
+  }
+
+  function onStartAtChange() {
+    setStartAt(!startAt);
+  }
+
+  function onStartTimeChange(e) {
+    setStartTime(e.target.value);
  }

  function onAspectRatioChange() {
    const newVal = aspectRatioValueRef.current.value;

+    if (newVal === 'custom') {
+      setAspectRatio(newVal);
+      setKeepAspectRatio(false);
+    } else {
      const arr = newVal.split(':');
      const x = arr[0];
      const y = arr[1];

      setAspectRatio(newVal);
-    setEmbedHeightValue(keepAspectRatio ? parseInt((embedWidthValue * y) / x, 10) : embedHeightValue);
+      setKeepAspectRatio(true);
+      setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
+    }
  }

  function onWindowResize() {
@@ -130,13 +188,88 @@ export function MediaShareEmbed(props) {
    };
  }, []);

+  // Save embed options to localStorage when they change (except startAt/startTime)
+  useEffect(() => {
+    saveEmbedOptions({
+      showTitle,
+      showRelated,
+      showUserAvatar,
+      linkTitle,
+      responsive,
+      aspectRatio,
+      embedWidthValue,
+      embedWidthUnit,
+      embedHeightValue,
+      embedHeightUnit,
+      keepAspectRatio,
+    });
+  }, [showTitle, showRelated, showUserAvatar, linkTitle, responsive, aspectRatio, embedWidthValue, embedWidthUnit, embedHeightValue, embedHeightUnit, keepAspectRatio]);
+
+  function getEmbedCode() {
+    const mediaId = MediaPageStore.get('media-id');
+    const params = new URLSearchParams();
+    if (showTitle) params.set('showTitle', '1');
+    else params.set('showTitle', '0');
+    
+    if (showRelated) params.set('showRelated', '1');
+    else params.set('showRelated', '0');
+    
+    if (showUserAvatar) params.set('showUserAvatar', '1');
+    else params.set('showUserAvatar', '0');
+    
+    if (linkTitle) params.set('linkTitle', '1');
+    else params.set('linkTitle', '0');
+
+    if (startAt && startTime) {
+      const parts = startTime.split(':').reverse();
+      let seconds = 0;
+      if (parts[0]) seconds += parseInt(parts[0], 10) || 0;
+      if (parts[1]) seconds += (parseInt(parts[1], 10) || 0) * 60;
+      if (parts[2]) seconds += (parseInt(parts[2], 10) || 0) * 3600;
+      if (seconds > 0) params.set('t', seconds);
+    }
+
+    const separator = links.embed.includes('?') ? '&' : '?';
+    const finalUrl = `${links.embed}${mediaId}${separator}${params.toString()}`;
+
+    if (responsive) {
+      if (aspectRatio === 'custom') {
+        // Use current width/height values to calculate aspect ratio for custom
+        const ratio = `${embedWidthValue} / ${embedHeightValue}`;
+        const maxWidth = `calc(100vh * ${embedWidthValue} / ${embedHeightValue})`;
+        return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
+      }
+      const arr = aspectRatio.split(':');
+      const ratio = `${arr[0]} / ${arr[1]}`;
+      const maxWidth = `calc(100vh * ${arr[0]} / ${arr[1]})`;
+      return `<iframe src="${finalUrl}" style="width:100%;max-width:${maxWidth};aspect-ratio:${ratio};display:block;margin:auto;border:0;" allowFullScreen></iframe>`;
+    }
+
+    const width = 'percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue;
+    const height = 'percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue;
+    return `<iframe width="${width}" height="${height}" src="${finalUrl}" frameBorder="0" allowFullScreen></iframe>`;
+  }
+
  return (
    <div className="share-embed" style={{ maxHeight: maxHeight + 'px' }}>
      <div className="share-embed-inner">
        <div className="on-left">
          <div className="media-embed-wrap">
            <SiteConsumer>
-              {(site) => <VideoViewer data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} />}
+              {(site) => {
+                const previewUrl = `${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}&linkTitle=${linkTitle ? '1' : '0'}${startAt ? '&t=' + (startTime.split(':').reverse().reduce((acc, cur, i) => acc + (parseInt(cur, 10) || 0) * Math.pow(60, i), 0)) : ''}`;
+                
+                const style = {};
+                style.width = '100%';
+                style.height = '480px';
+                style.overflow = 'hidden';
+
+                return (
+                  <div style={style}>
+                    <iframe width="100%" height="100%" src={previewUrl} frameBorder="0" allowFullScreen></iframe>
+                  </div>
+                );
+              }}
            </SiteConsumer>
          </div>
        </div>
@@ -158,16 +291,7 @@ export function MediaShareEmbed(props) {
          >
            <textarea
              readOnly
-              value={
-                '<iframe width="' +
-                ('percent' === embedWidthUnit ? embedWidthValue + '%' : embedWidthValue) +
-                '" height="' +
-                ('percent' === embedHeightUnit ? embedHeightValue + '%' : embedHeightValue) +
-                '" src="' +
-                links.embed +
-                MediaPageStore.get('media-id') +
-                '" frameborder="0" allowfullscreen></iframe>'
-              }
+              value={getEmbedCode()}
            ></textarea>

            <div className="iframe-config">
@@ -179,34 +303,79 @@ export function MediaShareEmbed(props) {
 									</div>*/}

                <div className="option-content">
-                  <div className="ratio-options">
+                  <div className="ratio-options" style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '0 10px' }}>
                    <div className="options-group">
-                      <label style={{ minHeight: '36px' }}>
-                        <input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />
-                        Keep aspect ratio
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
+                        <input type="checkbox" checked={showTitle} onChange={onShowTitleChange} />
+                        Show title
                      </label>
                    </div>

-                    {!keepAspectRatio ? null : (
                    <div className="options-group">
-                        <select ref={aspectRatioValueRef} onChange={onAspectRatioChange} value={aspectRatio}>
-                          <optgroup label="Horizontal orientation">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={linkTitle} onChange={onLinkTitleChange} disabled={!showTitle} />
+                        Link title
+                      </label>
+                    </div>
+
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
+                        <input type="checkbox" checked={showRelated} onChange={onShowRelatedChange} />
+                        Show related
+                      </label>
+                    </div>
+
+                    <div className="options-group">
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', opacity: showTitle ? 1 : 0.5 }}>
+                        <input type="checkbox" checked={showUserAvatar} onChange={onShowUserAvatarChange} disabled={!showTitle} />
+                        Show user avatar
+                      </label>
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
+                        <input type="checkbox" checked={responsive} onChange={onResponsiveChange} />
+                        Responsive
+                      </label>
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', alignItems: 'center' }}>
+                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap', display: 'flex', alignItems: 'center', marginRight: '10px' }}>
+                        <input type="checkbox" checked={startAt} onChange={onStartAtChange} />
+                        Start at
+                      </label>
+                      {startAt && (
+                        <input 
+                          type="text" 
+                          value={startTime} 
+                          onChange={onStartTimeChange} 
+                          style={{ width: '60px', height: '28px', fontSize: '12px', padding: '2px 5px' }} 
+                        />
+                      )}
+                    </div>
+
+                    <div className="options-group" style={{ display: 'flex', flexDirection: 'column', justifyContent: 'center' }}>
+                      <div style={{ fontSize: '12px', marginBottom: '4px', color: 'rgba(0,0,0,0.6)' }}>Aspect Ratio</div>
+                      <div style={{ display: 'flex', alignItems: 'center' }}>
+                        <select 
+                          ref={aspectRatioValueRef} 
+                          onChange={onAspectRatioChange} 
+                          value={aspectRatio}
+                          style={{ height: '28px', fontSize: '12px' }}
+                        >
                          <option value="16:9">16:9</option>
                          <option value="4:3">4:3</option>
                          <option value="3:2">3:2</option>
-                          </optgroup>
-                          <optgroup label="Vertical orientation">
-                            <option value="9:16">9:16</option>
-                            <option value="3:4">3:4</option>
-                            <option value="2:3">2:3</option>
-                          </optgroup>
+                          <option value="custom">Custom</option>
                        </select>
                      </div>
-                    )}
+                    </div>
                  </div>

                  <br />

+                  {!responsive && (
+                    <>
                      <div className="options-group">
                        <NumericInputWithUnit
                          valueCallback={onEmbedWidthValueChange}
@@ -232,6 +401,8 @@ export function MediaShareEmbed(props) {
                          units={unitOptions}
                        />
                      </div>
+                    </>
+                  )}
                </div>
              </div>
            </div>
--- a/frontend/src/static/js/components/media-page/MediaPage.scss
+++ b/frontend/src/static/js/components/media-page/MediaPage.scss
@@ -1,6 +1,6 @@
@use "sass:math";
-@import '../../../css/includes/_variables.scss';
-@import '../../../css/includes/_variables_dimensions.scss';
+@import "../../../css/includes/_variables.scss";
+@import "../../../css/includes/_variables_dimensions.scss";

 .visible-sidebar .page-main-wrap {
    padding-left: 0;
@@ -119,7 +119,7 @@
                            background-color: var(--media-actions-share-copy-field-bg-color);
                        }

-            input[type='text'] {
+                        input[type="text"] {
                            color: var(--media-actions-share-copy-field-input-text-color);
                        }
                    }
@@ -180,7 +180,7 @@
            color: var(--report-form-field-label-text-color);
        }

-    input[type='text'],
+        input[type="text"],
        textarea {
            color: var(--report-form-field-input-text-color);
            border-color: var(--report-form-field-input-border-color);
@@ -479,7 +479,7 @@

        &.audio-player-container {
            &:before {
-        content: '\E3A1';
+                content: "\E3A1";
                position: absolute;
                top: 50%;
                left: 50%;
@@ -490,12 +490,11 @@

                line-height: 1;
                padding: 0;
-        font-family: 'Material Icons';
+                font-family: "Material Icons";
                text-decoration: none;
                color: #888;
            }

-
            .vjs-big-play-button {
            }

@@ -514,6 +513,13 @@
    }
 }

+.embedded-app {
+    .viewer-container,
+    .viewer-info {
+        width: 100%;
+    }
+}
+
 .viewer-image-container {
    position: relative;
    display: block;
@@ -550,8 +556,6 @@
    max-width: 90%;
 }

-
-
 .slideshow-image img {
    display: block;
    width: auto;
@@ -560,7 +564,9 @@
    max-height: 90vh;
    border-radius: 0;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
-  transition: transform 60s ease-in-out, opacity 60 ease-in-out;
+    transition:
+        transform 60s ease-in-out,
+        opacity 60 ease-in-out;
 }

 .slideshow-title {
@@ -572,7 +578,6 @@
    z-index: 1200;
 }

-
 .arrow {
    position: absolute;
    display: flex;
@@ -590,7 +595,9 @@
    padding: 10px;
    border-radius: 50%;
    z-index: 1000;
-  transition: background-color 0.2s ease, transform 0.2s ease;
+    transition:
+        background-color 0.2s ease,
+        transform 0.2s ease;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
 }

@@ -685,18 +692,19 @@
    width: 100%; // Default width for mobile
    height: 400px; // Default height for mobile

-  @media (min-width: 768px) and (max-width: 1023px) { // Tablets
+    @media (min-width: 768px) and (max-width: 1023px) {
+        // Tablets
        width: 90%;
        height: 600px;
    }

-  @media (min-width: 1024px) { // Desktop
+    @media (min-width: 1024px) {
+        // Desktop
        width: 85%;
        height: 900px;
    }
 }

-
 .viewer-container .player-container.viewer-pdf-container,
 .viewer-container .player-container.viewer-attachment-container {
    background-color: var(--item-thumb-bg-color);
@@ -1006,7 +1014,7 @@
                &.like,
                &.dislike {
                    &:before {
-            content: '';
+                        content: "";
                        position: absolute;
                        bottom: 0;
                        left: -4px;
@@ -1146,7 +1154,7 @@
                            border-radius: 2px;
                        }

-            input[type='text'] {
+                        input[type="text"] {
                            width: 100%;
                            height: 42px;
                            padding: 1px 0 1px 16px;
@@ -1206,13 +1214,18 @@
                                    width: 220px;
                                }

-                box-shadow: 0 16px 24px 2px rgba(#000, 0.14), 0 6px 30px 5px rgba(#000, 0.12),
+                                box-shadow:
+                                    0 16px 24px 2px rgba(#000, 0.14),
+                                    0 6px 30px 5px rgba(#000, 0.12),
                                    0 8px 10px -5px rgba(#000, 0.4);

                                &.main-options,
                                &.video-download-options {
                                    width: 240px;
-                  box-shadow: 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12), 0 3px 1px -2px rgba(#000, 0.2);
+                                    box-shadow:
+                                        0 2px 2px 0 rgba(#000, 0.14),
+                                        0 1px 5px 0 rgba(#000, 0.12),
+                                        0 3px 1px -2px rgba(#000, 0.2);
                                }
                            }
                        }
@@ -1270,7 +1283,9 @@
                                padding: 24px;
                                text-align: initial;

-                box-shadow: rgba(#000, 0.14) 0px 16px 24px 2px, rgba(#000, 0.12) 0px 6px 30px 5px,
+                                box-shadow:
+                                    rgba(#000, 0.14) 0px 16px 24px 2px,
+                                    rgba(#000, 0.12) 0px 6px 30px 5px,
                                    rgba(#000, 0.4) 0px 8px 10px;
                            }
                        }
@@ -1303,13 +1318,18 @@
                                    width: 220px;
                                }

-                box-shadow: 0 16px 24px 2px rgba(#000, 0.14), 0 6px 30px 5px rgba(#000, 0.12),
+                                box-shadow:
+                                    0 16px 24px 2px rgba(#000, 0.14),
+                                    0 6px 30px 5px rgba(#000, 0.12),
                                    0 8px 10px -5px rgba(#000, 0.4);

                                &.main-options,
                                &.video-download-options {
                                    width: 240px;
-                  box-shadow: 0 2px 2px 0 rgba(#000, 0.14), 0 1px 5px 0 rgba(#000, 0.12), 0 3px 1px -2px rgba(#000, 0.2);
+                                    box-shadow:
+                                        0 2px 2px 0 rgba(#000, 0.14),
+                                        0 1px 5px 0 rgba(#000, 0.12),
+                                        0 3px 1px -2px rgba(#000, 0.2);

                                    .popup-main {
                                        min-height: 0;
@@ -1412,7 +1432,7 @@
            font-weight: 500;
        }

-    input[type='text'],
+        input[type="text"],
        textarea {
            min-width: 100%;
            width: 100%;
@@ -1435,7 +1455,7 @@
            cursor: not-allowed;
        }

-    input[type='text'] {
+        input[type="text"] {
            font-size: 14px;
        }

@@ -1732,7 +1752,7 @@
        border-width: 0 0 1px;

        &:after {
-      content: '';
+            content: "";
            position: absolute;
            bottom: -5px;
            right: 0;
@@ -1788,7 +1808,7 @@
            max-height: 100%;
            padding: 16px;
            cursor: text;
-      font-family: 'Roboto Mono', monospace;
+            font-family: "Roboto Mono", monospace;
            font-size: 14px;
            line-height: 1.714285714;
            outline: 0;
@@ -1822,7 +1842,7 @@
                    vertical-align: top;

                    input {
-            &[type='checkbox'] {
+                        &[type="checkbox"] {
                            margin-left: 0;
                        }
                    }
@@ -1834,7 +1854,7 @@
                    width: 100%;

                    input {
-            &[type='checkbox'] {
+                        &[type="checkbox"] {
                            margin-left: 0;
                        }
                    }
@@ -1910,9 +1930,21 @@
        }
    }

+  .media-embed-wrap {
+    display: block;
+    width: 100%;
+    height: 100%;
+    background: #000;
    .media-embed-wrap {
        display: block;

+    .player-container,
+    .player-container-inner {
+      width: 100%;
+      height: 100%;
+      padding-top: 0;
+      background: #000;
+    }
        .player-container,
        .player-container-inner {
            width: 100%;
@@ -1926,6 +1958,10 @@
        .circle-icon-button {
        }

+    .video-js.vjs-mediacms {
+      padding-top: 0;
+    }
+  }
        .video-js.vjs-mediacms {
            padding-top: math.div(9, 16) * 100%;
        }
@@ -1979,8 +2015,8 @@
            }

            .item-date:before {
-        content: '•';
-        content: '\2022';
+                content: "•";
+                content: "\2022";
                margin: 0 4px;
            }

@@ -2017,14 +2053,14 @@
        margin-right: 4px;

        &:after {
-      content: ',';
+            content: ",";
        }

        &:last-child {
            margin-right: 0;

            &:after {
-        content: '';
+                content: "";
            }
        }
    }
--- a/frontend/src/static/js/components/media-page/ViewerInfoContent.js
+++ b/frontend/src/static/js/components/media-page/ViewerInfoContent.js
@@ -3,7 +3,7 @@ import { SiteContext } from '../../utils/contexts/';
 import { useUser, usePopup } from '../../utils/hooks/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { PageActions, MediaPageActions } from '../../utils/actions/';
-import { formatInnerLink, publishedOnDate } from '../../utils/helpers/';
+import { formatInnerLink, inEmbeddedApp, publishedOnDate } from '../../utils/helpers/';
 import { PopupMain } from '../_shared/';
 import CommentsList from '../comments/Comments';
 import { replaceString } from '../../utils/helpers/';
@@ -125,7 +125,9 @@ export default function ViewerInfoContent(props) {
            PageActions.addNotification('Media removed. Redirecting...', 'mediaDelete');
            setTimeout(function () {
                window.location.href =
-          SiteContext._currentValue.url + '/' + MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
+                    SiteContext._currentValue.url +
+                    '/' +
+                    MediaPageStore.get('media-data').author_profile.replace(/^\//g, '');
            }, 2000);
        }, 100);

@@ -185,7 +187,12 @@ export default function ViewerInfoContent(props) {
            {void 0 === PageStore.get('config-media-item').displayAuthor ||
            null === PageStore.get('config-media-item').displayAuthor ||
            !!PageStore.get('config-media-item').displayAuthor ? (
-        <MediaAuthorBanner link={authorLink} thumb={authorThumb} name={props.author.name} published={props.published} />
+                <MediaAuthorBanner
+                    link={authorLink}
+                    thumb={authorThumb}
+                    name={props.author.name}
+                    published={props.published}
+                />
            ) : null}

            <div className="media-content-banner">
@@ -212,14 +219,20 @@ export default function ViewerInfoContent(props) {
                    {categoriesContent.length ? (
                        <MediaMetaField
                            value={categoriesContent}
-              title={1 < categoriesContent.length ? translateString('Categories') : translateString('Category')}
+                            title={
+                                1 < categoriesContent.length
+                                    ? translateString('Categories')
+                                    : translateString('Category')
+                            }
                            id="categories"
                        />
                    ) : null}

                    {userCan.editMedia ? (
                        <div className="media-author-actions">
-              {userCan.editMedia ? <EditMediaButton link={MediaPageStore.get('media-data').edit_url} /> : null}
+                            {userCan.editMedia ? (
+                                <EditMediaButton link={MediaPageStore.get('media-data').edit_url} />
+                            ) : null}

                            {userCan.deleteMedia ? (
                                <PopupTrigger contentRef={popupContentRef}>
@@ -234,14 +247,22 @@ export default function ViewerInfoContent(props) {
                                    <PopupMain>
                                        <div className="popup-message">
                                            <span className="popup-message-title">Media removal</span>
-                      <span className="popup-message-main">You're willing to remove media permanently?</span>
+                                            <span className="popup-message-main">
+                                                You're willing to remove media permanently?
+                                            </span>
                                        </div>
                                        <hr />
                                        <span className="popup-message-bottom">
-                      <button className="button-link cancel-comment-removal" onClick={cancelMediaRemoval}>
+                                            <button
+                                                className="button-link cancel-comment-removal"
+                                                onClick={cancelMediaRemoval}
+                                            >
                                                CANCEL
                                            </button>
-                      <button className="button-link proceed-comment-removal" onClick={proceedMediaRemoval}>
+                                            <button
+                                                className="button-link proceed-comment-removal"
+                                                onClick={proceedMediaRemoval}
+                                            >
                                                PROCEED
                                            </button>
                                        </span>
@@ -253,7 +274,7 @@ export default function ViewerInfoContent(props) {
                </div>
            </div>

-      <CommentsList />
+            {!inEmbeddedApp() && <CommentsList />}
        </div>
    );
 }
--- a/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js
+++ b/frontend/src/static/js/components/media-page/ViewerInfoVideoTitleBanner.js
@@ -1,8 +1,16 @@
 import React from 'react';
-import { formatViewsNumber } from '../../utils/helpers/';
+import { formatViewsNumber, inEmbeddedApp } from '../../utils/helpers/';
 import { PageStore, MediaPageStore } from '../../utils/stores/';
 import { MemberContext, PlaylistsContext } from '../../utils/contexts/';
-import { MediaLikeIcon, MediaDislikeIcon, OtherMediaDownloadLink, VideoMediaDownloadLink, MediaSaveButton, MediaShareButton, MediaMoreOptionsIcon } from '../media-actions/';
+import {
+    MediaLikeIcon,
+    MediaDislikeIcon,
+    OtherMediaDownloadLink,
+    VideoMediaDownloadLink,
+    MediaSaveButton,
+    MediaShareButton,
+    MediaMoreOptionsIcon,
+} from '../media-actions/';
 import ViewerInfoTitleBanner from './ViewerInfoTitleBanner';
 import { translateString } from '../../utils/helpers/';

@@ -74,7 +82,8 @@ export default class ViewerInfoVideoTitleBanner extends ViewerInfoTitleBanner {

                    {displayViews ? (
                        <div className="media-views">
-              {formatViewsNumber(this.props.views, true)} {1 >= this.props.views ? translateString('view') : translateString('views')}
+                            {formatViewsNumber(this.props.views, true)}{' '}
+                            {1 >= this.props.views ? translateString('view') : translateString('views')}
                        </div>
                    ) : null}

@@ -82,9 +91,12 @@ export default class ViewerInfoVideoTitleBanner extends ViewerInfoTitleBanner {
                        <div>
                            {MemberContext._currentValue.can.likeMedia ? <MediaLikeIcon /> : null}
                            {MemberContext._currentValue.can.dislikeMedia ? <MediaDislikeIcon /> : null}
-              {MemberContext._currentValue.can.shareMedia ? <MediaShareButton isVideo={true} /> : null}
+                            {!inEmbeddedApp() && MemberContext._currentValue.can.shareMedia ? (
+                                <MediaShareButton isVideo={true} />
+                            ) : null}

-              {!MemberContext._currentValue.is.anonymous &&
+                            {!inEmbeddedApp() &&
+                            !MemberContext._currentValue.is.anonymous &&
                            MemberContext._currentValue.can.saveMedia &&
                            -1 < PlaylistsContext._currentValue.mediaTypes.indexOf(MediaPageStore.get('media-type')) ? (
                                <MediaSaveButton />
--- a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
+++ b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
@@ -410,8 +410,12 @@ export default class VideoViewer extends React.PureComponent {
                                            poster: this.videoPoster,
                                            previewSprite: previewSprite,
                                            subtitlesInfo: this.props.data.subtitles_info,
-                                            enableAutoplay: !this.props.inEmbed,
                                            inEmbed: this.props.inEmbed,
+                                            showTitle: this.props.showTitle,
+                                            showRelated: this.props.showRelated,
+                                            showUserAvatar: this.props.showUserAvatar,
+                                            linkTitle: this.props.linkTitle,
+                                            urlTimestamp: this.props.timestamp,
                                            hasTheaterMode: !this.props.inEmbed,
                                            hasNextLink: !!nextLink,
                                            nextLink: nextLink,
@@ -435,9 +439,19 @@ export default class VideoViewer extends React.PureComponent {

 VideoViewer.defaultProps = {
    inEmbed: !0,
+    showTitle: !0,
+    showRelated: !0,
+    showUserAvatar: !0,
+    linkTitle: !0,
+    timestamp: null,
    siteUrl: PropTypes.string.isRequired,
 };

 VideoViewer.propTypes = {
    inEmbed: PropTypes.bool,
+    showTitle: PropTypes.bool,
+    showRelated: PropTypes.bool,
+    showUserAvatar: PropTypes.bool,
+    linkTitle: PropTypes.bool,
+    timestamp: PropTypes.number,
 };
--- a/frontend/src/static/js/components/page-layout/PageMain.scss
+++ b/frontend/src/static/js/components/page-layout/PageMain.scss
@@ -23,6 +23,11 @@
        transition-property: padding-left;
        transition-duration: 0.2s;
    }
+
+    .embedded-app & {
+        padding-top: 0;
+        padding-left: 0;
+    }
 }

 #page-profile-media,
--- a/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js
+++ b/frontend/src/static/js/components/profile-page/ProfilePagesHeader.js
@@ -162,12 +162,16 @@ class ProfileSearchBar extends React.PureComponent {

        if (!this.state.visibleForm) {
            return (
-        <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.showForm}>
+                <span
+                    style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }}
+                    onClick={this.showForm}
+                >
                    <CircleIconButton buttonShadow={false}>
                        <i className="material-icons">search</i>
                    </CircleIconButton>
                    {hasSearchText ? (
-            <span style={{
+                        <span
+                            style={{
                                position: 'absolute',
                                top: '8px',
                                right: '8px',
@@ -176,7 +180,8 @@ class ProfileSearchBar extends React.PureComponent {
                                borderRadius: '50%',
                                backgroundColor: 'var(--default-theme-color)',
                                border: '2px solid white',
-            }}></span>
+                            }}
+                        ></span>
                    ) : null}
                </span>
            );
@@ -189,7 +194,8 @@ class ProfileSearchBar extends React.PureComponent {
                        <i className="material-icons">search</i>
                    </CircleIconButton>
                    {hasSearchText ? (
-            <span style={{
+                        <span
+                            style={{
                                position: 'absolute',
                                top: '8px',
                                right: '8px',
@@ -198,7 +204,8 @@ class ProfileSearchBar extends React.PureComponent {
                                borderRadius: '50%',
                                backgroundColor: 'var(--default-theme-color)',
                                border: '2px solid white',
-            }}></span>
+                            }}
+                        ></span>
                    ) : null}
                </span>
                <span>
@@ -427,17 +434,32 @@ class NavMenuInlineTabs extends React.PureComponent {

                        {!['about', 'playlists'].includes(this.props.type) ? (
                            <li className="media-search">
-                <ProfileSearchBar onQueryChange={this.props.onQueryChange} toggleSearchField={this.onToggleSearchField} type={this.props.type} />
+                                <ProfileSearchBar
+                                    onQueryChange={this.props.onQueryChange}
+                                    toggleSearchField={this.onToggleSearchField}
+                                    type={this.props.type}
+                                />
                            </li>
                        ) : null}
-            {this.props.onToggleFiltersClick && ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
+                        {this.props.onToggleFiltersClick &&
+                        ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
                            <li className="media-filters-toggle">
-                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.props.onToggleFiltersClick} title={translateString('Filters')}>
+                                <span
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        cursor: 'pointer',
+                                        position: 'relative',
+                                    }}
+                                    onClick={this.props.onToggleFiltersClick}
+                                    title={translateString('Filters')}
+                                >
                                    <CircleIconButton buttonShadow={false}>
                                        <i className="material-icons">filter_list</i>
                                    </CircleIconButton>
                                    {this.props.hasActiveFilters ? (
-                    <span style={{
+                                        <span
+                                            style={{
                                                position: 'absolute',
                                                top: '8px',
                                                right: '8px',
@@ -446,19 +468,31 @@ class NavMenuInlineTabs extends React.PureComponent {
                                                borderRadius: '50%',
                                                backgroundColor: 'var(--default-theme-color)',
                                                border: '2px solid white',
-                    }}></span>
+                                            }}
+                                        ></span>
                                    ) : null}
                                </span>
                            </li>
                        ) : null}
-            {this.props.onToggleTagsClick && ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
+                        {this.props.onToggleTagsClick &&
+                        ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
                            <li className="media-tags-toggle">
-                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.props.onToggleTagsClick} title={translateString('Tags')}>
+                                <span
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        cursor: 'pointer',
+                                        position: 'relative',
+                                    }}
+                                    onClick={this.props.onToggleTagsClick}
+                                    title={translateString('Tags')}
+                                >
                                    <CircleIconButton buttonShadow={false}>
                                        <i className="material-icons">local_offer</i>
                                    </CircleIconButton>
                                    {this.props.hasActiveTags ? (
-                    <span style={{
+                                        <span
+                                            style={{
                                                position: 'absolute',
                                                top: '8px',
                                                right: '8px',
@@ -467,19 +501,31 @@ class NavMenuInlineTabs extends React.PureComponent {
                                                borderRadius: '50%',
                                                backgroundColor: 'var(--default-theme-color)',
                                                border: '2px solid white',
-                    }}></span>
+                                            }}
+                                        ></span>
                                    ) : null}
                                </span>
                            </li>
                        ) : null}
-            {this.props.onToggleSortingClick && ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
+                        {this.props.onToggleSortingClick &&
+                        ['media', 'shared_by_me', 'shared_with_me'].includes(this.props.type) ? (
                            <li className="media-sorting-toggle">
-                <span style={{ display: 'flex', alignItems: 'center', cursor: 'pointer', position: 'relative' }} onClick={this.props.onToggleSortingClick} title={translateString('Sort By')}>
+                                <span
+                                    style={{
+                                        display: 'flex',
+                                        alignItems: 'center',
+                                        cursor: 'pointer',
+                                        position: 'relative',
+                                    }}
+                                    onClick={this.props.onToggleSortingClick}
+                                    title={translateString('Sort By')}
+                                >
                                    <CircleIconButton buttonShadow={false}>
                                        <i className="material-icons">swap_vert</i>
                                    </CircleIconButton>
                                    {this.props.hasActiveSort ? (
-                    <span style={{
+                                        <span
+                                            style={{
                                                position: 'absolute',
                                                top: '8px',
                                                right: '8px',
@@ -488,7 +534,8 @@ class NavMenuInlineTabs extends React.PureComponent {
                                                borderRadius: '50%',
                                                backgroundColor: 'var(--default-theme-color)',
                                                border: '2px solid white',
-                    }}></span>
+                                            }}
+                                        ></span>
                                    ) : null}
                                </span>
                            </li>
@@ -658,6 +705,7 @@ export default function ProfilePagesHeader(props) {

    return (
        <div ref={profilePageHeaderRef} className={'profile-page-header' + (fixedNav ? ' fixed-nav' : '')}>
+            {!props.hideChannelBanner && (
                <span className="profile-banner-wrap">
                    {props.author.banner_thumbnail_url ? (
                        <span
@@ -685,14 +733,22 @@ export default function ProfilePagesHeader(props) {
                                <PopupMain>
                                    <div className="popup-message">
                                        <span className="popup-message-title">Profile removal</span>
-                  <span className="popup-message-main">You're willing to remove profile permanently?</span>
+                                        <span className="popup-message-main">
+                                            You're willing to remove profile permanently?
+                                        </span>
                                    </div>
                                    <hr />
                                    <span className="popup-message-bottom">
-                  <button className="button-link cancel-profile-removal" onClick={cancelProfileRemoval}>
+                                        <button
+                                            className="button-link cancel-profile-removal"
+                                            onClick={cancelProfileRemoval}
+                                        >
                                            CANCEL
                                        </button>
-                  <button className="button-link proceed-profile-removal" onClick={proceedMediaRemoval}>
+                                        <button
+                                            className="button-link proceed-profile-removal"
+                                            onClick={proceedMediaRemoval}
+                                        >
                                            PROCEED
                                        </button>
                                    </span>
@@ -709,17 +765,22 @@ export default function ProfilePagesHeader(props) {
                        )
                    ) : null}
                </span>
+            )}

            <div className="profile-info-nav-wrap">
                {props.author.thumbnail_url || props.author.name ? (
                    <div className="profile-info">
                        <div className="profile-info-inner">
-              <div>{props.author.thumbnail_url ? <img src={props.author.thumbnail_url} alt="" /> : null}</div>
+                            <div>
+                                {props.author.thumbnail_url ? <img src={props.author.thumbnail_url} alt="" /> : null}
+                            </div>
                            <div>
                                {props.author.name ? (
                                    <div className="profile-name-edit-wrapper">
                                        <h1>{props.author.name}</h1>
-                    {userCanEditProfile && !userIsAuthor ? <EditProfileButton link={ProfilePageStore.get('author-data').edit_url} /> : null}
+                                        {userCanEditProfile && !userIsAuthor ? (
+                                            <EditProfileButton link={ProfilePageStore.get('author-data').edit_url} />
+                                        ) : null}
                                    </div>
                                ) : null}
                            </div>
--- a/frontend/src/static/js/pages/EmbedPage.tsx
+++ b/frontend/src/static/js/pages/EmbedPage.tsx
@@ -41,7 +41,7 @@ export const EmbedPage: React.FC = () => {
  }, []);

  return (
-    <div className="embed-wrap" style={wrapperStyles}>
+    <div className="embed-wrap media-embed-wrap" style={wrapperStyles}>
      {failedMediaLoad && (
        <div className="player-container player-container-error" style={containerStyles}>
          <div className="player-container-inner" style={containerStyles}>
@@ -59,9 +59,32 @@ export const EmbedPage: React.FC = () => {

      {loadedVideo && (
        <SiteConsumer>
-        {(site) => (
-            <VideoViewer data={MediaPageStore.get('media-data')} siteUrl={site.url} containerStyles={containerStyles} />
-          )} 
+        {(site) => {
+            const urlParams = new URLSearchParams(window.location.search);
+            const urlShowTitle = urlParams.get('showTitle');
+            const showTitle = urlShowTitle !== '0';
+            const urlShowRelated = urlParams.get('showRelated');
+            const showRelated = urlShowRelated !== '0';
+            const urlShowUserAvatar = urlParams.get('showUserAvatar');
+            const showUserAvatar = urlShowUserAvatar !== '0';
+            const urlLinkTitle = urlParams.get('linkTitle');
+            const linkTitle = urlLinkTitle !== '0';
+            const urlTimestamp = urlParams.get('t');
+            const timestamp = urlTimestamp ? parseInt(urlTimestamp, 10) : null;
+
+            return (
+              <VideoViewer 
+                data={MediaPageStore.get('media-data')} 
+                siteUrl={site.url} 
+                containerStyles={containerStyles} 
+                showTitle={showTitle}
+                showRelated={showRelated}
+                showUserAvatar={showUserAvatar}
+                linkTitle={linkTitle}
+                timestamp={timestamp}
+              />
+            );
+          }} 
        </SiteConsumer>
      )}
    </div>
--- a/frontend/src/static/js/pages/ProfileAboutPage.js
+++ b/frontend/src/static/js/pages/ProfileAboutPage.js
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import UrlParse from 'url-parse';
 import { ApiUrlContext, MemberContext, SiteContext } from '../utils/contexts/';
-import { formatInnerLink, csrfToken, postRequest } from '../utils/helpers/';
+import { formatInnerLink, csrfToken, postRequest, inEmbeddedApp } from '../utils/helpers/';
 import { PageActions } from '../utils/actions/';
 import { PageStore, ProfilePageStore } from '../utils/stores/';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
@@ -268,7 +268,7 @@ export class ProfileAboutPage extends ProfileMediaPage {

    return [
      this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="about" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="about" hideChannelBanner={inEmbeddedApp()} />
      ) : null,
      this.state.author ? (
        <ProfilePagesContent key="ProfilePagesContent" enabledContactForm={this.enabledContactForm}>
--- a/frontend/src/static/js/pages/ProfileHistoryPage.js
+++ b/frontend/src/static/js/pages/ProfileHistoryPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -28,7 +29,7 @@ export class ProfileHistoryPage extends ProfileMediaPage {
  pageContent() {
    return [
      this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="history" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="history" hideChannelBanner={inEmbeddedApp()} />
      ) : null,
      this.state.author ? (
        <ProfilePagesContent key="ProfilePagesContent">
--- a/frontend/src/static/js/pages/ProfileLikedPage.js
+++ b/frontend/src/static/js/pages/ProfileLikedPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -28,7 +29,7 @@ export class ProfileLikedPage extends ProfileMediaPage {
  pageContent() {
    return [
      this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="liked" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="liked" hideChannelBanner={inEmbeddedApp()} />
      ) : null,
      this.state.author ? (
        <ProfilePagesContent key="ProfilePagesContent">
--- a/frontend/src/static/js/pages/ProfileMediaPage.js
+++ b/frontend/src/static/js/pages/ProfileMediaPage.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { ApiUrlContext, LinksConsumer, MemberContext } from '../utils/contexts';
 import { PageStore, ProfilePageStore } from '../utils/stores';
 import { ProfilePageActions, PageActions } from '../utils/actions';
-import { translateString } from '../utils/helpers/';
+import { inEmbeddedApp, translateString } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -120,7 +120,13 @@ export class ProfileMediaPage extends Page {

        if (author) {
            if (this.state.query) {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&q=' +
+                    encodeURIComponent(this.state.query) +
+                    this.state.filterArgs;
            } else {
                requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + this.state.filterArgs;
            }
@@ -171,7 +177,13 @@ export class ProfileMediaPage extends Page {
        let requestUrl;

        if (newQuery) {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&q=' +
+                encodeURIComponent(newQuery) +
+                this.state.filterArgs;
        } else {
            requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + this.state.filterArgs;
        }
@@ -212,37 +224,55 @@ export class ProfileMediaPage extends Page {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to delete') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to delete') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'enable-comments') {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to enable comments to') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to enable comments to') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'disable-comments') {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to disable comments to') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to disable comments to') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'enable-download') {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to enable download for') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to enable download for') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'disable-download') {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to disable download for') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to disable download for') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'copy-media') {
            this.setState({
                showConfirmModal: true,
                pendingAction: action,
-        confirmMessage: translateString('You are going to copy') + ` ${selectedCount} ` + translateString('media, are you sure?'),
+                confirmMessage:
+                    translateString('You are going to copy') +
+                    ` ${selectedCount} ` +
+                    translateString('media, are you sure?'),
            });
        } else if (action === 'add-remove-coviewers') {
            this.setState({
@@ -337,7 +367,8 @@ export class ProfileMediaPage extends Page {
                return response.json();
            })
            .then((data) => {
-        const message = selectedCount === 1
+                const message =
+                    selectedCount === 1
                        ? translateString('The media was deleted successfully.')
                        : translateString('Successfully deleted') + ` ${selectedCount} ` + translateString('media.');
                this.showNotification(message);
@@ -590,10 +621,18 @@ export class ProfileMediaPage extends Page {
        this.setState({ selectedTag: tag }, () => {
            // Apply tag filter
            this.onFiltersUpdate({
-        media_type: this.state.filterArgs.includes('media_type') ? this.state.filterArgs.match(/media_type=([^&]*)/)?.[1] : null,
-        upload_date: this.state.filterArgs.includes('upload_date') ? this.state.filterArgs.match(/upload_date=([^&]*)/)?.[1] : null,
-        duration: this.state.filterArgs.includes('duration') ? this.state.filterArgs.match(/duration=([^&]*)/)?.[1] : null,
-        publish_state: this.state.filterArgs.includes('publish_state') ? this.state.filterArgs.match(/publish_state=([^&]*)/)?.[1] : null,
+                media_type: this.state.filterArgs.includes('media_type')
+                    ? this.state.filterArgs.match(/media_type=([^&]*)/)?.[1]
+                    : null,
+                upload_date: this.state.filterArgs.includes('upload_date')
+                    ? this.state.filterArgs.match(/upload_date=([^&]*)/)?.[1]
+                    : null,
+                duration: this.state.filterArgs.includes('duration')
+                    ? this.state.filterArgs.match(/duration=([^&]*)/)?.[1]
+                    : null,
+                publish_state: this.state.filterArgs.includes('publish_state')
+                    ? this.state.filterArgs.match(/publish_state=([^&]*)/)?.[1]
+                    : null,
                sort_by: this.state.selectedSort,
                tag: tag,
            });
@@ -604,10 +643,18 @@ export class ProfileMediaPage extends Page {
        this.setState({ selectedSort: sortOption }, () => {
            // Apply sort filter
            this.onFiltersUpdate({
-        media_type: this.state.filterArgs.includes('media_type') ? this.state.filterArgs.match(/media_type=([^&]*)/)?.[1] : null,
-        upload_date: this.state.filterArgs.includes('upload_date') ? this.state.filterArgs.match(/upload_date=([^&]*)/)?.[1] : null,
-        duration: this.state.filterArgs.includes('duration') ? this.state.filterArgs.match(/duration=([^&]*)/)?.[1] : null,
-        publish_state: this.state.filterArgs.includes('publish_state') ? this.state.filterArgs.match(/publish_state=([^&]*)/)?.[1] : null,
+                media_type: this.state.filterArgs.includes('media_type')
+                    ? this.state.filterArgs.match(/media_type=([^&]*)/)?.[1]
+                    : null,
+                upload_date: this.state.filterArgs.includes('upload_date')
+                    ? this.state.filterArgs.match(/upload_date=([^&]*)/)?.[1]
+                    : null,
+                duration: this.state.filterArgs.includes('duration')
+                    ? this.state.filterArgs.match(/duration=([^&]*)/)?.[1]
+                    : null,
+                publish_state: this.state.filterArgs.includes('publish_state')
+                    ? this.state.filterArgs.match(/publish_state=([^&]*)/)?.[1]
+                    : null,
                sort_by: sortOption,
                tag: this.state.selectedTag,
            });
@@ -707,9 +754,16 @@ export class ProfileMediaPage extends Page {
                let requestUrl;

                if (this.state.query) {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&q=' +
+                        encodeURIComponent(this.state.query) +
+                        this.state.filterArgs;
                } else {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + this.state.filterArgs;
                }

                this.setState({
@@ -851,7 +905,10 @@ export class ProfileMediaPage extends Page {
    onResponseDataLoaded(responseData) {
        // Extract tags from response
        if (responseData && responseData.tags) {
-      const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
+            const tags = responseData.tags
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag);
            this.setState({ availableTags: tags });
        }
    }
@@ -862,12 +919,12 @@ export class ProfileMediaPage extends Page {
        const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;

        // Check if any filters are active (excluding default sort and tags)
-    const hasActiveFilters = this.state.filterArgs && (
-      this.state.filterArgs.includes('media_type=') ||
+        const hasActiveFilters =
+            this.state.filterArgs &&
+            (this.state.filterArgs.includes('media_type=') ||
                this.state.filterArgs.includes('upload_date=') ||
                this.state.filterArgs.includes('duration=') ||
-      this.state.filterArgs.includes('publish_state=')
-    );
+                this.state.filterArgs.includes('publish_state='));

        const hasActiveTags = this.state.selectedTag && this.state.selectedTag !== 'all';
        const hasActiveSort = this.state.selectedSort && this.state.selectedSort !== 'date_added_desc';
@@ -885,6 +942,7 @@ export class ProfileMediaPage extends Page {
                    hasActiveFilters={hasActiveFilters}
                    hasActiveTags={hasActiveTags}
                    hasActiveSort={hasActiveSort}
+                    hideChannelBanner={inEmbeddedApp()}
                />
            ) : null,
            this.state.author ? (
@@ -900,8 +958,18 @@ export class ProfileMediaPage extends Page {
                        onDeselectAll={this.handleDeselectAll}
                        showAddMediaButton={isMediaAuthor}
                    >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} selectedTag={this.state.selectedTag} selectedSort={this.state.selectedSort} />
-            <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
+                        <ProfileMediaFilters
+                            hidden={this.state.hiddenFilters}
+                            tags={this.state.availableTags}
+                            onFiltersUpdate={this.onFiltersUpdate}
+                            selectedTag={this.state.selectedTag}
+                            selectedSort={this.state.selectedSort}
+                        />
+                        <ProfileMediaTags
+                            hidden={this.state.hiddenTags}
+                            tags={this.state.availableTags}
+                            onTagSelect={this.onTagSelect}
+                        />
                        <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
                        <LazyLoadItemListAsync
                            key={`${this.state.requestUrl}-${this.state.listKey}`}
--- a/frontend/src/static/js/pages/ProfilePlaylistsPage.js
+++ b/frontend/src/static/js/pages/ProfilePlaylistsPage.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { ApiUrlConsumer } from '../utils/contexts/';
 import { PageStore } from '../utils/stores/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import { MediaListWrapper } from '../components/MediaListWrapper';
 import ProfilePagesHeader from '../components/profile-page/ProfilePagesHeader';
 import ProfilePagesContent from '../components/profile-page/ProfilePagesContent';
@@ -30,7 +31,7 @@ export class ProfilePlaylistsPage extends ProfileMediaPage {
  pageContent() {
    return [
      this.state.author ? (
-        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="playlists" />
+        <ProfilePagesHeader key="ProfilePagesHeader" author={this.state.author} type="playlists" hideChannelBanner={inEmbeddedApp()} />
      ) : null,
      this.state.author ? (
        <ProfilePagesContent key="ProfilePagesContent">
--- a/frontend/src/static/js/pages/ProfileSharedByMePage.js
+++ b/frontend/src/static/js/pages/ProfileSharedByMePage.js
@@ -11,7 +11,7 @@ import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFi
 import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
 import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
 import { BulkActionsModals } from '../components/BulkActionsModals';
-import { translateString } from '../utils/helpers';
+import { inEmbeddedApp, translateString } from '../utils/helpers';
 import { withBulkActions } from '../utils/hoc/withBulkActions';

 import { Page } from './_Page';
@@ -24,9 +24,7 @@ function EmptySharedByMe(props) {
            {(links) => (
                <div className="empty-media empty-channel-media">
                    <div className="welcome-title">No shared media</div>
-          <div className="start-uploading">
-            Media that you have shared with others will show up here.
-          </div>
+                    <div className="start-uploading">Media that you have shared with others will show up here.</div>
                </div>
            )}
        </LinksConsumer>
@@ -81,9 +79,20 @@ class ProfileSharedByMePage extends Page {

        if (author) {
            if (this.state.query) {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_by_me&q=' +
+                    encodeURIComponent(this.state.query) +
+                    this.state.filterArgs;
            } else {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_by_me' + this.state.filterArgs;
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_by_me' +
+                    this.state.filterArgs;
            }
        }

@@ -132,9 +141,20 @@ class ProfileSharedByMePage extends Page {
        let requestUrl;

        if (newQuery) {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_by_me&q=' +
+                encodeURIComponent(newQuery) +
+                this.state.filterArgs;
        } else {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_by_me' +
+                this.state.filterArgs;
        }

        let title = this.state.title;
@@ -290,9 +310,20 @@ class ProfileSharedByMePage extends Page {
                let requestUrl;

                if (this.state.query) {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_by_me&q=' +
+                        encodeURIComponent(this.state.query) +
+                        this.state.filterArgs;
                } else {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_by_me' + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_by_me' +
+                        this.state.filterArgs;
                }

                this.setState({
@@ -304,7 +335,10 @@ class ProfileSharedByMePage extends Page {

    onResponseDataLoaded(responseData) {
        if (responseData && responseData.tags) {
-      const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
+            const tags = responseData.tags
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag);
            this.setState({ availableTags: tags });
        }
    }
@@ -315,12 +349,12 @@ class ProfileSharedByMePage extends Page {
        const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;

        // Check if any filters are active
-    const hasActiveFilters = this.state.filterArgs && (
-      this.state.filterArgs.includes('media_type=') ||
+        const hasActiveFilters =
+            this.state.filterArgs &&
+            (this.state.filterArgs.includes('media_type=') ||
                this.state.filterArgs.includes('upload_date=') ||
                this.state.filterArgs.includes('duration=') ||
-      this.state.filterArgs.includes('publish_state=')
-    );
+                this.state.filterArgs.includes('publish_state='));

        return [
            this.state.author ? (
@@ -335,6 +369,7 @@ class ProfileSharedByMePage extends Page {
                    hasActiveFilters={hasActiveFilters}
                    hasActiveTags={this.state.selectedTag !== 'all'}
                    hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
+                    hideChannelBanner={inEmbeddedApp()}
                />
            ) : null,
            this.state.author ? (
@@ -349,8 +384,16 @@ class ProfileSharedByMePage extends Page {
                        onSelectAll={this.props.bulkActions.handleSelectAll}
                        onDeselectAll={this.props.bulkActions.handleDeselectAll}
                    >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
-            <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
+                        <ProfileMediaFilters
+                            hidden={this.state.hiddenFilters}
+                            tags={this.state.availableTags}
+                            onFiltersUpdate={this.onFiltersUpdate}
+                        />
+                        <ProfileMediaTags
+                            hidden={this.state.hiddenTags}
+                            tags={this.state.availableTags}
+                            onTagSelect={this.onTagSelect}
+                        />
                        <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
                        <LazyLoadItemListAsync
                            key={`${this.state.requestUrl}-${this.props.bulkActions.listKey}`}
--- a/frontend/src/static/js/pages/ProfileSharedWithMePage.js
+++ b/frontend/src/static/js/pages/ProfileSharedWithMePage.js
@@ -10,7 +10,7 @@ import { LazyLoadItemListAsync } from '../components/item-list/LazyLoadItemListA
 import { ProfileMediaFilters } from '../components/search-filters/ProfileMediaFilters';
 import { ProfileMediaTags } from '../components/search-filters/ProfileMediaTags';
 import { ProfileMediaSorting } from '../components/search-filters/ProfileMediaSorting';
-import { translateString } from '../utils/helpers';
+import { inEmbeddedApp, translateString } from '../utils/helpers';

 import { Page } from './_Page';

@@ -22,9 +22,7 @@ function EmptySharedWithMe(props) {
            {(links) => (
                <div className="empty-media empty-channel-media">
                    <div className="welcome-title">No shared media</div>
-          <div className="start-uploading">
-            Media that others have shared with you will show up here.
-          </div>
+                    <div className="start-uploading">Media that others have shared with you will show up here.</div>
                </div>
            )}
        </LinksConsumer>
@@ -79,9 +77,20 @@ export class ProfileSharedWithMePage extends Page {

        if (author) {
            if (this.state.query) {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_with_me&q=' +
+                    encodeURIComponent(this.state.query) +
+                    this.state.filterArgs;
            } else {
-        requestUrl = ApiUrlContext._currentValue.media + '?author=' + author.id + '&show=shared_with_me' + this.state.filterArgs;
+                requestUrl =
+                    ApiUrlContext._currentValue.media +
+                    '?author=' +
+                    author.id +
+                    '&show=shared_with_me' +
+                    this.state.filterArgs;
            }
        }

@@ -130,9 +139,20 @@ export class ProfileSharedWithMePage extends Page {
        let requestUrl;

        if (newQuery) {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(newQuery) + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_with_me&q=' +
+                encodeURIComponent(newQuery) +
+                this.state.filterArgs;
        } else {
-      requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
+            requestUrl =
+                ApiUrlContext._currentValue.media +
+                '?author=' +
+                this.state.author.id +
+                '&show=shared_with_me' +
+                this.state.filterArgs;
        }

        let title = this.state.title;
@@ -288,9 +308,20 @@ export class ProfileSharedWithMePage extends Page {
                let requestUrl;

                if (this.state.query) {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me&q=' + encodeURIComponent(this.state.query) + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_with_me&q=' +
+                        encodeURIComponent(this.state.query) +
+                        this.state.filterArgs;
                } else {
-          requestUrl = ApiUrlContext._currentValue.media + '?author=' + this.state.author.id + '&show=shared_with_me' + this.state.filterArgs;
+                    requestUrl =
+                        ApiUrlContext._currentValue.media +
+                        '?author=' +
+                        this.state.author.id +
+                        '&show=shared_with_me' +
+                        this.state.filterArgs;
                }

                this.setState({
@@ -302,7 +333,10 @@ export class ProfileSharedWithMePage extends Page {

    onResponseDataLoaded(responseData) {
        if (responseData && responseData.tags) {
-      const tags = responseData.tags.split(',').map((tag) => tag.trim()).filter((tag) => tag);
+            const tags = responseData.tags
+                .split(',')
+                .map((tag) => tag.trim())
+                .filter((tag) => tag);
            this.setState({ availableTags: tags });
        }
    }
@@ -313,12 +347,12 @@ export class ProfileSharedWithMePage extends Page {
        const isMediaAuthor = authorData && authorData.username === MemberContext._currentValue.username;

        // Check if any filters are active
-    const hasActiveFilters = this.state.filterArgs && (
-      this.state.filterArgs.includes('media_type=') ||
+        const hasActiveFilters =
+            this.state.filterArgs &&
+            (this.state.filterArgs.includes('media_type=') ||
                this.state.filterArgs.includes('upload_date=') ||
                this.state.filterArgs.includes('duration=') ||
-      this.state.filterArgs.includes('publish_state=')
-    );
+                this.state.filterArgs.includes('publish_state='));

        return [
            this.state.author ? (
@@ -333,16 +367,22 @@ export class ProfileSharedWithMePage extends Page {
                    hasActiveFilters={hasActiveFilters}
                    hasActiveTags={this.state.selectedTag !== 'all'}
                    hasActiveSort={this.state.selectedSort !== 'date_added_desc'}
+                    hideChannelBanner={inEmbeddedApp()}
                />
            ) : null,
            this.state.author ? (
                <ProfilePagesContent key="ProfilePagesContent">
-          <MediaListWrapper
-            title={this.state.title}
-            className="items-list-ver"
-          >
-            <ProfileMediaFilters hidden={this.state.hiddenFilters} tags={this.state.availableTags} onFiltersUpdate={this.onFiltersUpdate} />
-            <ProfileMediaTags hidden={this.state.hiddenTags} tags={this.state.availableTags} onTagSelect={this.onTagSelect} />
+                    <MediaListWrapper title={this.state.title} className="items-list-ver">
+                        <ProfileMediaFilters
+                            hidden={this.state.hiddenFilters}
+                            tags={this.state.availableTags}
+                            onFiltersUpdate={this.onFiltersUpdate}
+                        />
+                        <ProfileMediaTags
+                            hidden={this.state.hiddenTags}
+                            tags={this.state.availableTags}
+                            onTagSelect={this.onTagSelect}
+                        />
                        <ProfileMediaSorting hidden={this.state.hiddenSorting} onSortSelect={this.onSortSelect} />
                        <LazyLoadItemListAsync
                            key={this.state.requestUrl}
--- a/frontend/src/static/js/pages/_MediaPage.js
+++ b/frontend/src/static/js/pages/_MediaPage.js
@@ -1,6 +1,7 @@
 import React from 'react';
 import { PageStore, MediaPageStore } from '../utils/stores/';
 import { MediaPageActions } from '../utils/actions/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import ViewerError from '../components/media-page/ViewerError';
 import ViewerInfo from '../components/media-page/ViewerInfo';
 import ViewerSidebar from '../components/media-page/ViewerSidebar';
@@ -86,7 +87,7 @@ export class _MediaPage extends Page {
                    {!this.state.infoAndSidebarViewType
                        ? [
                              <ViewerInfo key="viewer-info" />,
-                this.state.pagePlaylistLoaded ? (
+                              !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
                                  <ViewerSidebar
                                      key="viewer-sidebar"
                                      mediaId={MediaPageStore.get('media-id')}
@@ -95,7 +96,7 @@ export class _MediaPage extends Page {
                              ) : null,
                          ]
                        : [
-                this.state.pagePlaylistLoaded ? (
+                              !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
                                  <ViewerSidebar
                                      key="viewer-sidebar"
                                      mediaId={MediaPageStore.get('media-id')}
--- a/frontend/src/static/js/pages/_VideoMediaPage.js
+++ b/frontend/src/static/js/pages/_VideoMediaPage.js
@@ -2,6 +2,7 @@ import React from 'react';
 // FIXME: 'VideoViewerStore' is used only in case of video media, but is included in every media page code.
 import { PageStore, MediaPageStore, VideoViewerStore } from '../utils/stores/';
 import { MediaPageActions } from '../utils/actions/';
+import { inEmbeddedApp } from '../utils/helpers/';
 import ViewerInfoVideo from '../components/media-page/ViewerInfoVideo';
 import ViewerError from '../components/media-page/ViewerError';
 import ViewerSidebar from '../components/media-page/ViewerSidebar';
@@ -54,7 +55,8 @@ export class _VideoMediaPage extends Page {
    }

    onMediaLoad() {
-    const isVideoMedia = 'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');
+        const isVideoMedia =
+            'video' === MediaPageStore.get('media-type') || 'audio' === MediaPageStore.get('media-type');

        if (isVideoMedia) {
            this.onViewerModeChange = this.onViewerModeChange.bind(this);
@@ -102,7 +104,7 @@ export class _VideoMediaPage extends Page {
                        {!this.state.wideLayout || (this.state.isVideoMedia && this.state.theaterMode)
                            ? [
                                  <ViewerInfoVideo key="viewer-info" />,
-                  this.state.pagePlaylistLoaded ? (
+                                  !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
                                      <ViewerSidebar
                                          key="viewer-sidebar"
                                          mediaId={MediaPageStore.get('media-id')}
@@ -111,7 +113,7 @@ export class _VideoMediaPage extends Page {
                                  ) : null,
                              ]
                            : [
-                  this.state.pagePlaylistLoaded ? (
+                                  !inEmbeddedApp() && this.state.pagePlaylistLoaded ? (
                                      <ViewerSidebar
                                          key="viewer-sidebar"
                                          mediaId={MediaPageStore.get('media-id')}
--- a/frontend/src/static/js/utils/contexts/LayoutContext.js
+++ b/frontend/src/static/js/utils/contexts/LayoutContext.js
@@ -1,7 +1,7 @@
-import React, { createContext, useContext, useEffect, useState } from 'react';
+import React, { createContext, useContext, useEffect, useMemo, useState } from 'react';
 import { BrowserCache } from '../classes/';
 import { PageStore } from '../stores/';
-import { addClassname, removeClassname } from '../helpers/';
+import { addClassname, removeClassname, inEmbeddedApp } from '../helpers/';
 import SiteContext from './SiteContext';

 let slidingSidebarTimeout;
@@ -45,7 +45,10 @@ export const LayoutProvider = ({ children }) => {
    const site = useContext(SiteContext);
    const cache = new BrowserCache('MediaCMS[' + site.id + '][layout]', 86400);

-  const enabledSidebar = !!(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));
+    const isMediaPage = useMemo(() => PageStore.get('current-page') === 'media', []);
+    const isEmbeddedApp = useMemo(() => inEmbeddedApp(), []);
+
+    const enabledSidebar = Boolean(document.getElementById('app-sidebar') || document.querySelector('.page-sidebar'));

    const [visibleSidebar, setVisibleSidebar] = useState(cache.get('visible-sidebar'));
    const [visibleMobileSearch, setVisibleMobileSearch] = useState(false);
@@ -61,28 +64,27 @@ export const LayoutProvider = ({ children }) => {
    };

    useEffect(() => {
-    if (visibleSidebar) {
+        if (!isEmbeddedApp && visibleSidebar) {
            addClassname(document.body, 'visible-sidebar');
        } else {
            removeClassname(document.body, 'visible-sidebar');
        }
-    if ('media' !== PageStore.get('current-page') && 1023 < window.innerWidth) {
+
+        if (!isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth) {
            cache.set('visible-sidebar', visibleSidebar);
        }
-  }, [visibleSidebar]);
+    }, [isEmbeddedApp, isMediaPage, visibleSidebar]);

    useEffect(() => {
        PageStore.once('page_init', () => {
-      if ('media' === PageStore.get('current-page')) {
+            if (isEmbeddedApp || isMediaPage) {
                setVisibleSidebar(false);
                removeClassname(document.body, 'visible-sidebar');
            }
        });

        setVisibleSidebar(
-      'media' !== PageStore.get('current-page') &&
-        1023 < window.innerWidth &&
-        (null === visibleSidebar || visibleSidebar)
+            !isEmbeddedApp && !isMediaPage && 1023 < window.innerWidth && (null === visibleSidebar || visibleSidebar)
        );
    }, []);

--- a/frontend/src/static/js/utils/helpers/embeddedApp.ts
+++ b/frontend/src/static/js/utils/helpers/embeddedApp.ts
@@ -0,0 +1,20 @@
+export function inEmbeddedApp() {
+    try {
+        const params = new URL(globalThis.location.href).searchParams;
+        const mode = params.get('mode');
+
+        if (mode === 'embed_mode') {
+            sessionStorage.setItem('media_cms_embed_mode', 'true');
+            return true;
+        }
+        
+        if (mode === 'standard') {
+            sessionStorage.removeItem('media_cms_embed_mode');
+            return false;
+        }
+
+        return sessionStorage.getItem('media_cms_embed_mode') === 'true';
+    } catch (e) {
+        return false;
+    }
+}
--- a/frontend/src/static/js/utils/helpers/index.js
+++ b/frontend/src/static/js/utils/helpers/index.js
@@ -14,3 +14,4 @@ export * from './quickSort';
 export * from './requests';
 export { translateString } from './translate';
 export { replaceString } from './replacementStrings';
+export * from './embeddedApp';
--- a/frontend/src/static/js/utils/renderer.js
+++ b/frontend/src/static/js/utils/renderer.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
 import { ThemeProvider } from './contexts/ThemeContext';
 import { LayoutProvider } from './contexts/LayoutContext';
 import { UserProvider } from './contexts/UserContext';
+import { inEmbeddedApp } from './helpers';

 const AppProviders = ({ children }) => (
    <LayoutProvider>
@@ -15,9 +16,27 @@ const AppProviders = ({ children }) => (
 import { PageHeader, PageSidebar } from '../components/page-layout';

 export function renderPage(idSelector, PageComponent) {
+    if (inEmbeddedApp()) {
+        globalThis.document.body.classList.add('embedded-app');
+        globalThis.document.body.classList.remove('visible-sidebar');
+
+        const appContent = idSelector ? document.getElementById(idSelector) : undefined;
+
+        if (appContent && PageComponent) {
+            ReactDOM.render(
+                <AppProviders>
+                    <PageComponent />
+                </AppProviders>,
+                appContent
+            );
+        }
+
+        return;
+    }
+
+    const appContent = idSelector ? document.getElementById(idSelector) : undefined;
    const appHeader = document.getElementById('app-header');
    const appSidebar = document.getElementById('app-sidebar');
-  const appContent = idSelector ? document.getElementById(idSelector) : undefined;

    if (appContent && PageComponent) {
        ReactDOM.render(
--- a/package-lock.json
+++ b/package-lock.json
--- a/package.json
+++ b/package.json
@@ -0,0 +1,13 @@
+{
+  "name": "mediacms",
+  "version": "7.5.0",
+  "devDependencies": {
+    "@semantic-release/changelog": "^6.0.3",
+    "@semantic-release/git": "^10.0.1",
+    "@semantic-release/github": "^11.0.3",
+    "@semantic-release/release-notes-generator": "^14.0.3",
+    "conventional-changelog-conventionalcommits": "^9.0.0",
+    "semantic-release": "^24.2.6",
+    "semantic-release-replace-plugin": "^1.2.7"
+  }
+}
--- a/static/css/_commons.css
+++ b/static/css/_commons.css
--- a/static/css/media.css
+++ b/static/css/media.css
--- a/static/css/playlist.css
+++ b/static/css/playlist.css
--- a/static/js/_commons.js
+++ b/static/js/_commons.js
--- a/static/js/categories.js
+++ b/static/js/categories.js
--- a/static/js/embed.js
+++ b/static/js/embed.js
--- a/static/js/featured.js
+++ b/static/js/featured.js
--- a/static/js/history.js
+++ b/static/js/history.js
--- a/static/js/index.js
+++ b/static/js/index.js
--- a/static/js/latest.js
+++ b/static/js/latest.js
--- a/static/js/liked.js
+++ b/static/js/liked.js
--- a/static/js/manage-comments.js
+++ b/static/js/manage-comments.js
--- a/static/js/media.js
+++ b/static/js/media.js
--- a/static/js/members.js
+++ b/static/js/members.js
--- a/static/js/playlist.js
+++ b/static/js/playlist.js
--- a/static/js/profile-about.js
+++ b/static/js/profile-about.js
--- a/static/js/profile-media.js
+++ b/static/js/profile-media.js
--- a/static/js/profile-playlists.js
+++ b/static/js/profile-playlists.js
--- a/static/js/profile-shared-by-me.js
+++ b/static/js/profile-shared-by-me.js
--- a/static/js/profile-shared-with-me.js
+++ b/static/js/profile-shared-with-me.js
--- a/static/js/recommended.js
+++ b/static/js/recommended.js
--- a/static/js/search.js
+++ b/static/js/search.js
--- a/static/js/tags.js
+++ b/static/js/tags.js
--- a/static/video_js/video-js.css
+++ b/static/video_js/video-js.css
--- a/static/video_js/video-js.js
+++ b/static/video_js/video-js.js
--- a/static/video_js/video-js.js.map
+++ b/static/video_js/video-js.js.map
Author	SHA1	Message	Date
semantic-release-bot	f7c675596f	chore(release): 7.5.0 [skip ci] ## [7.5.0](https://github.com/mediacms-io/mediacms/compare/v7.4.0...v7.5.0) (2026-02-06) ### Features * bump version ([`36d815c`](`36d815c0cf`))	2026-02-06 17:26:12 +00:00
Markos Gogoulos	36d815c0cf	feat: bump version	2026-02-06 19:25:31 +02:00
semantic-release-bot	8f28b00a63	chore(release): 7.4.0 [skip ci] ## [7.4.0](https://github.com/mediacms-io/mediacms/compare/v7.3.0...v7.4.0) (2026-02-06) ### Features * Add video player context menu with share/embed options ([#1472](https://github.com/mediacms-io/mediacms/issues/1472)) ([`74952f6`](`74952f68d7`))	2026-02-06 17:24:27 +00:00
Yiannis Christodoulou	74952f68d7	feat: Add video player context menu with share/embed options (#1472 )	2026-02-06 19:23:51 +02:00
semantic-release-bot	7950a4655a	chore(release): 7.3.0 [skip ci] ## [7.3.0](https://github.com/mediacms-io/mediacms/compare/v7.2.0...v7.3.0) (2026-02-06) ### Features * add package json for semantic release ([`b405a04`](`b405a04e34`)) * add semantic release github actions ([`76a27ae`](`76a27ae256`)) * frontend unit tests ([`1c15880`](`1c15880ae3`)) * Implement persistent "Embed Mode" to hide UI shell via Session Storage ([#1484](https://github.com/mediacms-io/mediacms/issues/1484)) ([`223e870`](`223e87073f`)) * Improve Visual Distinction Between Trim and Chapters Editors ([#1445](https://github.com/mediacms-io/mediacms/issues/1445)) ([`d9b1d6c`](`d9b1d6cab1`)) * semantic release ([`b76282f`](`b76282f9e4`)) ### Bug Fixes * add delay to task creation ([`1b3cdfd`](`1b3cdfd302`)) * Add regex denoter and improve celerybeat gitignore ([#1446](https://github.com/mediacms-io/mediacms/issues/1446)) ([`90331f3`](`90331f3b4a`)) * adjust poster url for audio ([`01912ea`](`01912ea1f9`)) * Chapter numbering and preserve custom titles on segment reorder ([#1435](https://github.com/mediacms-io/mediacms/issues/1435)) ([`cd7dd4f`](`cd7dd4f72c`)) * Show default chapter names in textarea instead of placeholder text ([#1428](https://github.com/mediacms-io/mediacms/issues/1428)) ([`5eb6faf`](`5eb6fafb8c`)) * static files ([#1429](https://github.com/mediacms-io/mediacms/issues/1429)) ([`ba2c31b`](`ba2c31b1e6`)) ### Documentation * update page link ([`aeef828`](`aeef8284bf`))	2026-02-06 16:56:49 +00:00
Markos Gogoulos	b76282f9e4	feat: semantic release	2026-02-06 18:56:13 +02:00
Markos Gogoulos	b405a04e34	feat: add package json for semantic release	2026-02-06 18:53:03 +02:00
Markos Gogoulos	76a27ae256	feat: add semantic release github actions	2026-02-06 18:40:50 +02:00
Markos Gogoulos	223e87073f	feat: Implement persistent "Embed Mode" to hide UI shell via Session Storage (#1484 ) * initial implementation * updates in ViewerInfoVideoTitleBanner component * Implement persistent "Embed Mode" to hide UI shell via Session Storage --------- Co-authored-by: Yiannis <1515939+styiannis@users.noreply.github.com>	2026-01-31 15:27:40 +02:00