diff --git a/shesha-reactjs/src/componentsApi/componentApi.ts b/shesha-reactjs/src/componentsApi/componentApi.ts
index 659605f31b..7455bd564e 100644
--- a/shesha-reactjs/src/componentsApi/componentApi.ts
+++ b/shesha-reactjs/src/componentsApi/componentApi.ts
@@ -374,6 +374,13 @@ export interface PanelApi extends CommonComponentApi {
   collapse(): void;
 };
 
+export interface YouTubeVideoApi extends CommonComponentApi {
+  /** Whether the viewer has started watching the video (playback began at least once) */
+  readonly isWatched: boolean;
+  /** Whether the viewer has watched the video all the way to the end */
+  readonly isWatchedEntirely: boolean;
+};
+
 export interface ButtonApi extends CommonComponentApi {
   /** Focus on component */
   focus(): void;
diff --git a/shesha-reactjs/src/designer-components/youtubeVideo/index.tsx b/shesha-reactjs/src/designer-components/youtubeVideo/index.tsx
index fadab27b1f..9434e4eb5d 100644
--- a/shesha-reactjs/src/designer-components/youtubeVideo/index.tsx
+++ b/shesha-reactjs/src/designer-components/youtubeVideo/index.tsx
@@ -15,7 +15,10 @@ import { migratePropertyName, migrateCustomFunctions } from '@/designer-componen
 import { migrateVisibility } from '@/designer-components/_common-migrations/migrateVisibility';
 import { migrateFormApi } from '../_common-migrations/migrateFormApi1';
 import { removeUndefinedProps } from '@/utils/object';
-import { ConfigurableFormItem } from '@/components/formDesigner/components/formItem';
+import { useComponentApi } from '@/providers/componentApi/provider';
+import { useEffectOnce } from '@/hooks/useEffectOnce';
+import { YouTubeVideoApi } from '@/componentsApi/componentApi';
+import apiCode from '../../componentsApi/componentApi.ts?raw';
 import { loadYouTubeIframeApi, YTPlayer, YTPlayerEvent } from './youtubeApi';
 import { useStyles } from './styles';
 
@@ -23,8 +26,7 @@ const { Title, Paragraph } = Typography;
 
 const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYoutubeVideoCalculatedValues> = {
   type: 'youtubeVideo',
-  isInput: true,
-  isOutput: true,
+  isInput: false,
   name: 'YouTube Video',
   icon: <YoutubeOutlined />,
   Factory: ({ model, calculatedModel }) => {
@@ -53,7 +55,6 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
       thumbnailUrl,
       thumbnailBase64,
       thumbnailStoredFileId,
-      watchCompletionRequired = false,
       onPlay,
       onPause,
       onEnd,
@@ -62,10 +63,14 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
     } = model;
 
     const { formMode } = calculatedModel;
+    // `hasWatched` tracks thumbnail dismissal (iframe visibility) only.
     const [hasWatched, setHasWatched] = useState(false);
-    const [isCompleted, setIsCompleted] = useState(false);
     const playerRef = useRef<HTMLIFrameElement>(null);
-    const onChangeRef = useRef<((value: boolean | undefined | null) => void) | null>(null);
+
+    // Actual playback state, kept in refs so the exposed API getters always read the latest value
+    // (the getters are called later, from the form's events/expressions).
+    const hasStartedRef = useRef(false);
+    const isCompletedRef = useRef(false);
 
     const { executeAction } = useConfigurableActionDispatcher();
     const allConstants = useAvailableConstantsData();
@@ -73,11 +78,26 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
     const constantsRef = useRef(allConstants);
     constantsRef.current = allConstants;
 
-    // The Player API is needed only when events are wired up or watch-completion gates submission.
-    const eventsConfigured = isNonEmptyActionConfiguration(onPlay) || isNonEmptyActionConfiguration(onPause) || isNonEmptyActionConfiguration(onEnd) || isNonEmptyActionConfiguration(onReady);
-    const needsJsApi = eventsConfigured || watchCompletionRequired;
-
-    // titleLevel arrives from the dropdown as a string ('1'..'5'); Ant's Title needs a 1-5 number.
+    // Expose read-only watch state on the component's public API so the final form can gate
+    // submission itself (e.g. checking `isWatchedEntirely` in an OnBeforeSubmit event) instead of
+    // this component binding to a form field.
+    const componentApi = useComponentApi();
+    useEffect(() => {
+      componentApi?.updateApi<YouTubeVideoApi>({
+        id: model.id,
+        componentName: model.componentName ?? '',
+        level: 3,
+        typeDefinition: { typeName: 'YouTubeVideoApi', files: [{ content: apiCode, fileName: 'apis/componentApi.ts' }] },
+        properties: [
+          { name: 'isWatched', getter: () => hasStartedRef.current },
+          { name: 'isWatchedEntirely', getter: () => isCompletedRef.current },
+        ],
+      });
+    }, [componentApi, model.componentName, model.id]);
+    useEffectOnce(() => () => componentApi?.removeApi(model.id));
+
+    // titleLevel arrives from the dropdown as a number, but older configs / JS-setting bindings may
+    // deliver a string ('1'..'5'); Ant's Title needs a 1-5 number. Fall back to 3 (default).
     const parsedTitleLevel = Number(titleLevel);
     const resolvedTitleLevel = (Number.isFinite(parsedTitleLevel) && parsedTitleLevel >= 1 && parsedTitleLevel <= 5
       ? parsedTitleLevel
@@ -106,57 +126,49 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
 
     const resolvedThumbnail = getThumbnailUrl();
 
-    // Helper to convert any value to percentage
+    // Convert a width value (number, "500px", "50%", etc.) to a percentage string.
     const toPercentage = (value: string | number | undefined): string | undefined => {
       if (value === undefined) {
         return undefined;
       }
-
       const strValue = String(value).trim();
-
-      // If already a percentage, return as-is
       if (strValue.endsWith('%')) {
         return strValue;
       }
-
-      // Extract numeric part from "500px", "500", etc.
-      const numericPart = strValue.match(/^(\d+(?:\.\d+)?)/)?.[1];
+      const numericPart = /^(\d+(?:\.\d+)?)/.exec(strValue)?.[1];
       if (numericPart == null) {
         return undefined;
       }
-
-      const numeric = parseFloat(numericPart);
+      const numeric = Number.parseFloat(numericPart);
       if (!Number.isFinite(numeric) || numeric < 0) {
         return undefined;
       }
-
       return `${numeric}%`;
     };
 
-    // Intercept dimensions when responsive mode is enabled
-    let finalDimensionStyles = { ...model.allStyles?.dimensionsStyles };
-
-    if (responsive && model.dimensions != null) {
-      // Convert configured width to a percentage for the 16:9 responsive container
-      finalDimensionStyles = {
-        ...finalDimensionStyles,
-        width: toPercentage(model.dimensions.width) ?? '100%',
-        height: undefined, // Remove height for aspect ratio
-      };
-    } else if (!responsive) {
-      if (finalDimensionStyles.width === undefined && finalDimensionStyles.height === undefined) {
-        finalDimensionStyles = {
-          ...finalDimensionStyles,
-          width: 560,
-          height: 315,
-        };
+    // Resolved, device-aware dimensions come from `model.allStyles.dimensionsStyles` — NOT
+    // `model.dimensions`, which is always empty because the Appearance inputs are stored per-device
+    // (desktop/tablet/mobile). Responsive: a 16:9 container drives height, so height/min/max-height
+    // are dropped and the width becomes a percentage. Fixed: configured width/height (default 560x315).
+    const dimensionStyles = model.allStyles?.dimensionsStyles ?? {};
+    const finalDimensionStyles = responsive
+      ? {
+        ...dimensionStyles,
+        width: toPercentage(dimensionStyles.width) ?? '100%',
+        height: undefined,
+        minHeight: undefined,
+        maxHeight: undefined,
+      }
+      : {
+        ...dimensionStyles,
+        width: dimensionStyles.width ?? 560,
+        height: dimensionStyles.height ?? 315,
       };
-    }
 
-    // Apply all styles to component wrapper
+    // Apply all styles to the component wrapper
     const componentStyles = removeUndefinedProps({
       ...model.allStyles?.jsStyle,
-      ...finalDimensionStyles, // Use intercepted dimensions
+      ...finalDimensionStyles,
       ...model.allStyles?.borderStyles,
       ...model.allStyles?.shadowStyles,
       ...model.allStyles?.stylingBoxAsCSS,
@@ -196,13 +208,11 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
       // Mobile parameters
       if (!playsinline) params.append('playsinline', '0');
 
-      // JS API and security - enable when events are wired or watch completion is required
-      if (needsJsApi) {
-        params.append('enablejsapi', '1');
-        // Add origin parameter for security when using JS API
-        if (typeof window !== 'undefined') {
-          params.append('origin', window.location.origin);
-        }
+      // Always enable the JS API (with an origin for security) so play/pause/end events fire and the
+      // exposed isWatched/isWatchedEntirely state stays accurate.
+      params.append('enablejsapi', '1');
+      if (typeof window !== 'undefined') {
+        params.append('origin', window.location.origin);
       }
 
       return `${baseUrl}?${params.toString()}`;
@@ -268,9 +278,18 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
     const handlersRef = useRef({ onPlay, onPause, onEnd, onReady, executeAction });
     handlersRef.current = { onPlay, onPause, onEnd, onReady, executeAction };
 
+    // Reset watch state only when the watched video identity changes, so the exposed
+    // isWatched/isWatchedEntirely never carry over from a previously-played video — and are NOT
+    // discarded when the component is merely hidden/shown (e.g. a wizard step or tab switch).
+    useEffect(() => {
+      hasStartedRef.current = false;
+      isCompletedRef.current = false;
+    }, [videoId]);
+
     // Track play/pause/end via the official YouTube IFrame Player API (reliable, unlike raw postMessage).
+    // Updates the watch-state refs (exposed on the API) and fires the configured events.
     useEffect(() => {
-      if (!needsJsApi || formMode === 'designer' || isNullOrWhiteSpace(videoId) || !iframeShown) {
+      if (hidden || formMode === 'designer' || isNullOrWhiteSpace(videoId) || !iframeShown) {
         return undefined;
       }
 
@@ -293,14 +312,13 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
               onReady: (): void => fire(handlersRef.current.onReady),
               onStateChange: (event: YTPlayerEvent): void => {
                 if (event.data === YT.PlayerState.PLAYING) {
-                  setHasWatched(true);
+                  hasStartedRef.current = true;
                   fire(handlersRef.current.onPlay);
                 } else if (event.data === YT.PlayerState.PAUSED) {
                   fire(handlersRef.current.onPause);
                 } else if (event.data === YT.PlayerState.ENDED) {
-                  setHasWatched(true);
-                  setIsCompleted(true);
-                  onChangeRef.current?.(true);
+                  hasStartedRef.current = true;
+                  isCompletedRef.current = true;
                   fire(handlersRef.current.onEnd);
                 }
               },
@@ -319,110 +337,79 @@ const YoutubeVideoComponent: IToolboxComponent<IYoutubeVideoComponentProps, IYou
           // player may already be gone
         }
       };
-    }, [needsJsApi, formMode, videoId, iframeShown]);
+    }, [formMode, videoId, iframeShown, hidden]);
 
     if (hidden) {
       return null;
     }
 
-    // Add custom validation when watch completion is required
-    const modelWithValidation = watchCompletionRequired
-      ? {
-        ...model,
-        validate: {
-          ...model.validate,
-          validator: `
-              // Custom validator for watch completion
-              if (value === true) {
-                return Promise.resolve();
-              }
-               return Promise.reject(new Error('You must watch the entire video to continue'));
-            `,
-        },
+    // No video configured (or invalid): show the placeholder in designer mode, render nothing at
+    // runtime. Guards against rendering <iframe src=""> which browsers resolve to the host page.
+    if (youtubeUrl == null) {
+      if (formMode !== 'designer') {
+        return null;
       }
-      : model;
+      return (
+        <div className={styles.youtubeVideoPlaceholder}>
+          <YoutubeOutlined style={{ fontSize: '48px', color: '#ff0000' }} />
+          <p>YouTube Video Component</p>
+          <p style={{ fontSize: '12px', color: '#666' }}>
+            Configure the Video ID in settings to see the video
+          </p>
+        </div>
+      );
+    }
 
     return (
-      <ConfigurableFormItem model={modelWithValidation}>
-        {(value: boolean | undefined | null, onChange: (newValue: boolean | undefined | null) => void) => {
-          // Store onChange in ref for event handler
-          onChangeRef.current = onChange;
-
-          // Check completion from both state and form value
-          const completed = value === true || isCompleted;
-
-          // Render placeholder in designer mode
-          if (formMode === 'designer' && isNullOrWhiteSpace(videoId)) {
-            return (
-              <div className={styles.youtubeVideoPlaceholder}>
-                <YoutubeOutlined style={{ fontSize: '48px', color: '#ff0000' }} />
-                <p>YouTube Video Component</p>
-                <p style={{ fontSize: '12px', color: '#666' }}>
-                  Configure the Video ID in settings to see the video
-                </p>
-              </div>
-            );
-          }
-
-          return (
-            <div className={styles.youtubeVideoComponent} style={componentStyles}>
-              {!isNullOrWhiteSpace(title) && (
-                <Title
-                  level={resolvedTitleLevel}
-                  className="youtube-video-title"
-                >
-                  {title}
-                </Title>
-              )}
-              {!isNullOrWhiteSpace(description) && (
-                <Paragraph
-                  className="youtube-video-description"
-                >
-                  {description}
-                </Paragraph>
-              )}
-
-              <div className="youtube-video-container" style={containerStyle}>
-                {resolvedThumbnail != null && !hasWatched ? (
-                  <div
-                    className="youtube-custom-thumbnail"
-                    role="button"
-                    tabIndex={0}
-                    aria-label={!isNullOrWhiteSpace(title) ? `Play video: ${title}` : 'Play video'}
-                    onClick={() => setHasWatched(true)}
-                    onKeyDown={(e) => {
-                      if (e.key === 'Enter' || e.key === ' ') {
-                        e.preventDefault();
-                        setHasWatched(true);
-                      }
-                    }}
-                    style={thumbnailStyle}
-                  >
-                    <div className="youtube-play-button">
-                      <YoutubeOutlined style={{ fontSize: '64px', color: 'white' }} />
-                    </div>
-                  </div>
-                ) : (
-                  <iframe
-                    ref={playerRef}
-                    src={youtubeUrl ?? ''}
-                    style={iframeStyle}
-                    allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
-                    allowFullScreen
-                    title={!isNullOrWhiteSpace(title) ? title : 'YouTube Video'}
-                  />
-                )}
+      <div className={styles.youtubeVideoComponent} style={componentStyles}>
+        {!isNullOrWhiteSpace(title) && (
+          <Title
+            level={resolvedTitleLevel}
+            className="youtube-video-title"
+          >
+            {title}
+          </Title>
+        )}
+        {!isNullOrWhiteSpace(description) && (
+          <Paragraph
+            className="youtube-video-description"
+          >
+            {description}
+          </Paragraph>
+        )}
+
+        <div className="youtube-video-container" style={containerStyle}>
+          {resolvedThumbnail != null && !hasWatched ? (
+            <div
+              className="youtube-custom-thumbnail"
+              role="button"
+              tabIndex={0}
+              aria-label={!isNullOrWhiteSpace(title) ? `Play video: ${title}` : 'Play video'}
+              onClick={() => setHasWatched(true)}
+              onKeyDown={(e) => {
+                if (e.key === 'Enter' || e.key === ' ') {
+                  e.preventDefault();
+                  setHasWatched(true);
+                }
+              }}
+              style={thumbnailStyle}
+            >
+              <div className="youtube-play-button">
+                <YoutubeOutlined style={{ fontSize: '64px', color: 'white' }} />
               </div>
-
-              {watchCompletionRequired && !completed && formMode !== 'designer' && (
-                <div className="youtube-completion-warning">
-                  <span style={{ color: 'orange' }}>⚠️ You must watch the entire video to continue</span>
-                </div>
-              )}
             </div>
-          );
-        }}
-      </ConfigurableFormItem>
+          ) : (
+            <iframe
+              ref={playerRef}
+              src={youtubeUrl}
+              style={iframeStyle}
+              allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+              allowFullScreen
+              title={!isNullOrWhiteSpace(title) ? title : 'YouTube Video'}
+            />
+          )}
+        </div>
+      </div>
     );
   },
   calculateModel: (_model, allData) => ({
diff --git a/shesha-reactjs/src/designer-components/youtubeVideo/interfaces.ts b/shesha-reactjs/src/designer-components/youtubeVideo/interfaces.ts
index 1ac5c22d78..3f5d591a99 100644
--- a/shesha-reactjs/src/designer-components/youtubeVideo/interfaces.ts
+++ b/shesha-reactjs/src/designer-components/youtubeVideo/interfaces.ts
@@ -38,10 +38,6 @@ export interface IYoutubeVideoComponentProps extends IConfigurableFormComponent
   // Mobile Settings
   playsinline?: boolean;
 
-  // Form-Specific Behavior (Lower Priority)
-  isRequired?: boolean;
-  watchCompletionRequired?: boolean;
-
   // Event Handlers
   onPlay?: IConfigurableActionConfiguration;
   onPause?: IConfigurableActionConfiguration;
diff --git a/shesha-reactjs/src/designer-components/youtubeVideo/settingsForm.ts b/shesha-reactjs/src/designer-components/youtubeVideo/settingsForm.ts
index 703160ab8c..7c64913695 100644
--- a/shesha-reactjs/src/designer-components/youtubeVideo/settingsForm.ts
+++ b/shesha-reactjs/src/designer-components/youtubeVideo/settingsForm.ts
@@ -114,9 +114,9 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                               tooltip: 'Heading level for the title (h1-h5)',
                               dropdownOptions: [
                                 { label: '1 (Largest)', value: 1 },
-                                { label: '2', value: 2 },
+                                { label: '2 (Large)', value: 2 },
                                 { label: '3 (Default)', value: 3 },
-                                { label: '4', value: 4 },
+                                { label: '4 (Small)', value: 4 },
                                 { label: '5 (Smallest)', value: 5 },
                               ],
                             },
@@ -694,21 +694,6 @@ export const getSettings: SettingsFormMarkupFactory = ({ fbf }) => {
                     _value: false,
                   },
                 })
-                .addSettingsInputRow({
-                  id: nanoid(),
-                  parentId: advancedTabId,
-                  inputs: [
-                    {
-                      type: 'switch',
-                      id: nanoid(),
-                      propertyName: 'watchCompletionRequired',
-                      label: 'Require Watch Completion',
-                      size: 'small',
-                      jsSetting: true,
-                      tooltip: 'When enabled, the form cannot be submitted until the user watches the entire video. The completion state is stored in the form data.',
-                    },
-                  ],
-                })
                 .toJson(),
             ],
           },
diff --git a/shesha-reactjs/src/designer-components/youtubeVideo/styles.ts b/shesha-reactjs/src/designer-components/youtubeVideo/styles.ts
index caab7321e1..bf897c1468 100644
--- a/shesha-reactjs/src/designer-components/youtubeVideo/styles.ts
+++ b/shesha-reactjs/src/designer-components/youtubeVideo/styles.ts
@@ -63,15 +63,6 @@ export const useStyles = createStyles(({ css, cx }) => {
         }
       }
     }
-
-    .youtube-completion-warning {
-      margin-top: 8px;
-      padding: 8px 12px;
-      background-color: #fff7e6;
-      border: 1px solid #ffd591;
-      border-radius: 4px;
-      font-size: 13px;
-    }
   `);
 
   const youtubeVideoPlaceholder = cx("youtube-video-placeholder", css`