fix embed options

2026-01-20 07:12:58 -05:00 · 2026-01-08 10:27:44 +02:00
parent c54e46c412
commit f1e69f795f
9 changed files with 2399 additions and 2333 deletions
--- a/__test-iframe/index2.html
+++ b/__test-iframe/index2.html
@@ -0,0 +1,29 @@
+<!DOCTYPE html>
+<html lang="en">
+    <head>
+        <meta charset="UTF-8" />
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+        <title>MediaCMS Embed Test</title>
+        <style>
+            /* CSS Reset for full-page iframe */
+            html,
+            body {
+                margin: 0;
+                padding: 0;
+                height: 100%;
+                width: 100%;
+                overflow: hidden;
+                background-color: #000;
+            }
+        </style>
+    </head>
+    <body>
+        <iframe
+            src="http://localhost/embed?m=6WShYNxZx&showTitle=1&showRelated=1&showUserAvatar=0&linkTitle=0"
+            width="100%"
+            height="100%"
+            frameborder="0"
+            allowfullscreen
+        ></iframe>
+    </body>
+</html>
--- a/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
+++ b/frontend-tools/video-js/src/components/video-player/VideoJSPlayer.jsx
@@ -170,7 +170,7 @@ const enableStandardButtonTooltips = (player) => {
    }, 500); // Delay to ensure all components are ready
 };

-function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelated = true, showUserAvatar = true, linkTitle = true }) {
+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
@@ -185,76 +185,10 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
    // Check if this is an embed player (disable next video and autoplay features)
    const isEmbedPlayer = videoId === 'video-embed';

-    // Read showTitle from URL parameter if available (for embed players)
-    const getShowTitleFromURL = useMemo(() => {
-        if (isEmbedPlayer && typeof window !== 'undefined') {
-            const urlParams = new URLSearchParams(window.location.search);
-            const urlShowTitle = urlParams.get('showTitle');
-            if (urlShowTitle !== null) {
-                return urlShowTitle === '1' || urlShowTitle === 'true';
-            }
-        }
-        return showTitle;
-    }, [isEmbedPlayer, showTitle]);
-
-    // Read showRelated from URL parameter if available (for embed players)
-    const getShowRelatedFromURL = useMemo(() => {
-        if (isEmbedPlayer && typeof window !== 'undefined') {
-            const urlParams = new URLSearchParams(window.location.search);
-            const urlShowRelated = urlParams.get('showRelated');
-            if (urlShowRelated !== null) {
-                return urlShowRelated === '1' || urlShowRelated === 'true';
-            }
-        }
-        return showRelated;
-    }, [isEmbedPlayer, showRelated]);
-
-    // Read showUserAvatar from URL parameter if available (for embed players)
-    const getShowUserAvatarFromURL = useMemo(() => {
-        if (isEmbedPlayer && typeof window !== 'undefined') {
-            const urlParams = new URLSearchParams(window.location.search);
-            const urlShowUserAvatar = urlParams.get('showUserAvatar');
-            if (urlShowUserAvatar !== null) {
-                return urlShowUserAvatar === '1' || urlShowUserAvatar === 'true';
-            }
-        }
-        return showUserAvatar;
-    }, [isEmbedPlayer, showUserAvatar]);
-
-    // Read linkTitle from URL parameter if available (for embed players)
-    const getLinkTitleFromURL = useMemo(() => {
-        if (isEmbedPlayer && typeof window !== 'undefined') {
-            const urlParams = new URLSearchParams(window.location.search);
-            const urlLinkTitle = urlParams.get('linkTitle');
-            if (urlLinkTitle !== null) {
-                return urlLinkTitle === '1' || urlLinkTitle === 'true';
-            }
-        }
-        return linkTitle;
-    }, [isEmbedPlayer, linkTitle]);
-
-    // Use URL parameter value if available, otherwise use prop value
-    const finalShowTitle = isEmbedPlayer ? getShowTitleFromURL : showTitle;
-    const finalShowRelated = isEmbedPlayer ? getShowRelatedFromURL : showRelated;
-    const finalShowUserAvatar = isEmbedPlayer ? getShowUserAvatarFromURL : showUserAvatar;
-    const finalLinkTitle = isEmbedPlayer ? getLinkTitleFromURL : linkTitle;
-
-    // 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
@@ -273,12 +207,37 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
                      },
                      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:
@@ -590,8 +549,6 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
            isPlayList: mediaData?.isPlayList,
            related_media: mediaData.data?.related_media || [],
            nextLink: mediaData?.nextLink || null,
-            urlAutoplay: mediaData?.urlAutoplay || true,
-            urlMuted: mediaData?.urlMuted || false,
            sources: getVideoSources(),
        };

@@ -1366,8 +1323,8 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
                    }

                    // 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) {
@@ -2417,7 +2374,7 @@ function VideoJSPlayer({ videoId = 'default-video', showTitle = true, showRelate
                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"
--- a/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
+++ b/frontend/src/static/js/components/VideoJS/VideoJSEmbed.jsx
@@ -31,7 +31,6 @@ const VideoJSEmbed = ({
    poster,
    previewSprite,
    subtitlesInfo,
-    enableAutoplay,
    inEmbed,
    showTitle,
    showRelated,
@@ -66,7 +65,6 @@ 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');
@@ -78,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,
@@ -90,7 +88,6 @@ 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),
@@ -103,7 +100,6 @@ 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',
--- a/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
+++ b/frontend/src/static/js/components/media-actions/MediaShareEmbed.jsx
@@ -4,7 +4,6 @@ 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';

 export function MediaShareEmbed(props) {
  const embedVideoDimensions = PageStore.get('config-options').embedded.video.dimensions;
@@ -23,6 +22,9 @@ export function MediaShareEmbed(props) {
  const [showRelated, setShowRelated] = useState(true);
  const [showUserAvatar, setShowUserAvatar] = useState(true);
  const [linkTitle, setLinkTitle] = useState(true);
+  const [responsive, setResponsive] = useState(true);
+  const [startAt, setStartAt] = useState(false);
+  const [startTime, setStartTime] = useState('0:00');
  const [aspectRatio, setAspectRatio] = useState('16:9');
  const [embedWidthValue, setEmbedWidthValue] = useState(embedVideoDimensions.width);
  const [embedWidthUnit, setEmbedWidthUnit] = useState(embedVideoDimensions.widthUnit);
@@ -75,27 +77,6 @@ export function MediaShareEmbed(props) {
    setEmbedHeightUnit(newVal);
  }

-  function onKeepAspectRatioChange() {
-    const newVal = !keepAspectRatio;
-
-    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: '%' },
-        ]
-    );
-  }
-
  function onShowTitleChange() {
    setShowTitle(!showTitle);
  }
@@ -112,6 +93,37 @@ export function MediaShareEmbed(props) {
    setLinkTitle(!linkTitle);
  }

+  function onResponsiveChange() {
+    const nextResponsive = !responsive;
+    setResponsive(nextResponsive);
+
+    if (!nextResponsive) {
+      const arr = aspectRatio.split(':');
+      const x = arr[0];
+      const y = arr[1];
+
+      setKeepAspectRatio(true);
+      setEmbedWidthUnit('px');
+      setEmbedHeightUnit('px');
+      setEmbedHeightValue(parseInt((embedWidthValue * y) / x, 10));
+      setUnitOptions([{ key: 'px', label: 'px' }]);
+    } else {
+      setKeepAspectRatio(false);
+      setUnitOptions([
+        { key: 'px', label: 'px' },
+        { key: 'percent', label: '%' },
+      ]);
+    }
+  }
+
+  function onStartAtChange() {
+    setStartAt(!startAt);
+  }
+
+  function onStartTimeChange(e) {
+    setStartTime(e.target.value);
+  }
+
  function onAspectRatioChange() {
    const newVal = aspectRatioValueRef.current.value;

@@ -150,16 +162,62 @@ export function MediaShareEmbed(props) {
    };
  }, []);

+  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) {
+      return `<iframe src="${finalUrl}" width="100%" height="100%" frameBorder="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 key={`embed-${showTitle}-${showRelated}-${showUserAvatar}-${linkTitle}`} data={MediaPageStore.get('media-data')} siteUrl={site.url} inEmbed={true} showTitle={showTitle} showRelated={showRelated} showUserAvatar={showUserAvatar} linkTitle={linkTitle} /> */}
-               <iframe width="100%" height="480px" src={`${links.embed + MediaPageStore.get('media-id')}&showTitle=${showTitle ? '1' : '0'}&showRelated=${showRelated ? '1' : '0'}&showUserAvatar=${showUserAvatar ? '1' : '0'}&linkTitle=${linkTitle ? '1' : '0'}`} frameborder="0" allowfullscreen></iframe>
-               </>}
+              {(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>
@@ -181,21 +239,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') +
-                (links.embed.includes('?') ? '&' : '?') +
-                'showTitle=' + (showTitle ? '1' : '0') +
-                '&showRelated=' + (showRelated ? '1' : '0') +
-                '&showUserAvatar=' + (showUserAvatar ? '1' : '0') +
-                '&linkTitle=' + (linkTitle ? '1' : '0') +
-                '" frameborder="0" allowfullscreen></iframe>'
-              }
+              value={getEmbedCode()}
            ></textarea>

            <div className="iframe-config">
@@ -236,58 +280,85 @@ export function MediaShareEmbed(props) {
                      </label>
                    </div>

-                    <div className="options-group">
-                      <label style={{ minHeight: '36px', whiteSpace: 'nowrap' }}>
-                        <input type="checkbox" checked={keepAspectRatio} onChange={onKeepAspectRatioChange} />
-                        Keep aspect ratio
+                    <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>

-                    {!keepAspectRatio ? null : (
-                      <div className="options-group">
-                        <select ref={aspectRatioValueRef} onChange={onAspectRatioChange} value={aspectRatio}>
-                          <optgroup label="Horizontal orientation">
-                            <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>
-                        </select>
+                    <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>
+
+                    {!responsive && (
+                      <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' }}
+                          >
+                            <optgroup label="Horizontal orientation">
+                              <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>
+                          </select>
+                        </div>
                      </div>
                    )}
                  </div>

                  <br />

-                  <div className="options-group">
-                    <NumericInputWithUnit
-                      valueCallback={onEmbedWidthValueChange}
-                      unitCallback={onEmbedWidthUnitChange}
-                      label={'Width'}
-                      defaultValue={parseInt(embedWidthValue, 10)}
-                      defaultUnit={embedWidthUnit}
-                      minValue={1}
-                      maxValue={99999}
-                      units={unitOptions}
-                    />
-                  </div>
+                  {!responsive && (
+                    <>
+                      <div className="options-group">
+                        <NumericInputWithUnit
+                          valueCallback={onEmbedWidthValueChange}
+                          unitCallback={onEmbedWidthUnitChange}
+                          label={'Width'}
+                          defaultValue={parseInt(embedWidthValue, 10)}
+                          defaultUnit={embedWidthUnit}
+                          minValue={1}
+                          maxValue={99999}
+                          units={unitOptions}
+                        />
+                      </div>

-                  <div className="options-group">
-                    <NumericInputWithUnit
-                      valueCallback={onEmbedHeightValueChange}
-                      unitCallback={onEmbedHeightUnitChange}
-                      label={'Height'}
-                      defaultValue={parseInt(embedHeightValue, 10)}
-                      defaultUnit={embedHeightUnit}
-                      minValue={1}
-                      maxValue={99999}
-                      units={unitOptions}
-                    />
-                  </div>
+                      <div className="options-group">
+                        <NumericInputWithUnit
+                          valueCallback={onEmbedHeightValueChange}
+                          unitCallback={onEmbedHeightUnitChange}
+                          label={'Height'}
+                          defaultValue={parseInt(embedHeightValue, 10)}
+                          defaultUnit={embedHeightUnit}
+                          minValue={1}
+                          maxValue={99999}
+                          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
--- a/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
+++ b/frontend/src/static/js/components/media-viewer/VideoViewer/index.js
@@ -410,12 +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,
@@ -443,6 +443,7 @@ VideoViewer.defaultProps = {
    showRelated: !0,
    showUserAvatar: !0,
    linkTitle: !0,
+    timestamp: null,
    siteUrl: PropTypes.string.isRequired,
 };

@@ -452,4 +453,5 @@ VideoViewer.propTypes = {
    showRelated: PropTypes.bool,
    showUserAvatar: PropTypes.bool,
    linkTitle: PropTypes.bool,
+    timestamp: PropTypes.number,
 };
--- 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}>
@@ -61,12 +61,17 @@ export const EmbedPage: React.FC = () => {
        <SiteConsumer>
        {(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')} 
@@ -76,6 +81,7 @@ export const EmbedPage: React.FC = () => {
                showRelated={showRelated}
                showUserAvatar={showUserAvatar}
                linkTitle={linkTitle}
+                timestamp={timestamp}
              />
            );
          }} 
--- 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