diff --git a/src/components/atoms/Plugin/IFrame/hooks.ts b/src/components/atoms/Plugin/IFrame/hooks.ts
index f4072f0ea..901af2acb 100644
--- a/src/components/atoms/Plugin/IFrame/hooks.ts
+++ b/src/components/atoms/Plugin/IFrame/hooks.ts
@@ -1,9 +1,11 @@
 import {
+  IframeHTMLAttributes,
   Ref,
   RefObject,
   useCallback,
   useEffect,
   useImperativeHandle,
+  useMemo,
   useRef,
   useState,
 } from "react";
@@ -17,6 +19,8 @@ export default function useHook({
   html,
   ref,
   autoResize,
+  visible,
+  iFrameProps,
   onLoad,
   onMessage,
 }: {
@@ -24,13 +28,14 @@ export default function useHook({
   html?: string;
   ref?: Ref<RefType>;
   autoResize?: boolean;
+  visible?: boolean;
+  iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
   onMessage?: (message: any) => void;
 } = {}): {
   ref: RefObject<HTMLIFrameElement>;
+  props: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
-  width?: string;
-  height?: string;
 } {
   const loaded = useRef(false);
   const iFrameRef = useRef<HTMLIFrameElement>(null);
@@ -86,7 +91,7 @@ export default function useHook({
             horizontalMargin = parseInt(st.getPropertyValue("margin-left")) + parseInt(st.getPropertyValue("margin-right"));
             verticalMargin = parseInt(st.getPropertyValue("margin-top")) + parseInt(st.getPropertyValue("margin-bottom"));
             const resize = {
-              width: el.offsetWidth + horizontalMargin, 
+              width: el.offsetWidth + horizontalMargin,
               height: el.offsetHeight + verticalMargin,
             };
             parent.postMessage({
@@ -126,10 +131,23 @@ export default function useHook({
     onLoad?.();
   }, [autoResizeMessageKey, html, onLoad]);
 
+  const props = useMemo<IframeHTMLAttributes<HTMLIFrameElement>>(
+    () => ({
+      style: {
+        display: visible ? undefined : "none",
+        width: visible ? (autoResize ? iFrameSize?.[0] : "100%") : "0px",
+        height: visible ? (autoResize ? iFrameSize?.[1] : "100%") : "0px",
+        minWidth: "100%",
+        ...iFrameProps?.style,
+      },
+      ...iFrameProps,
+    }),
+    [autoResize, iFrameProps, iFrameSize, visible],
+  );
+
   return {
     ref: iFrameRef,
-    width: iFrameSize?.[0],
-    height: iFrameSize?.[1],
+    props,
     onLoad: onIframeLoad,
   };
 }
diff --git a/src/components/atoms/Plugin/IFrame/index.stories.tsx b/src/components/atoms/Plugin/IFrame/index.stories.tsx
index 687a05d91..5744fae78 100644
--- a/src/components/atoms/Plugin/IFrame/index.stories.tsx
+++ b/src/components/atoms/Plugin/IFrame/index.stories.tsx
@@ -31,9 +31,11 @@ export const Default: Story<Props> = args => {
 Default.args = {
   autoResize: false,
   visible: true,
-  style: {
-    width: "400px",
-    height: "300px",
+  iFrameProps: {
+    style: {
+      width: "400px",
+      height: "300px",
+    },
   },
   html: `<h1>iframe</h1><script>
   window.addEventListener("message", ev => {
diff --git a/src/components/atoms/Plugin/IFrame/index.tsx b/src/components/atoms/Plugin/IFrame/index.tsx
index c7d0b0759..4bfce72ea 100644
--- a/src/components/atoms/Plugin/IFrame/index.tsx
+++ b/src/components/atoms/Plugin/IFrame/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, IframeHTMLAttributes } from "react";
+import React, { IframeHTMLAttributes } from "react";
 
 import useHook, { RefType } from "./hooks";
 
@@ -8,7 +8,6 @@ export type Props = {
   autoResize?: boolean;
   className?: string;
   html?: string;
-  style?: CSSProperties;
   visible?: boolean;
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   onLoad?: () => void;
@@ -16,15 +15,16 @@ export type Props = {
 };
 
 const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
-  { autoResize, className, html, style, visible, iFrameProps, onLoad, onMessage },
+  { autoResize, className, html, visible, iFrameProps, onLoad, onMessage },
   ref,
 ) => {
   const {
     ref: iFrameRef,
-    width,
-    height,
+    props,
     onLoad: onIFrameLoad,
   } = useHook({
+    visible,
+    iFrameProps,
     autoResize,
     html,
     ref,
@@ -40,16 +40,9 @@ const IFrame: React.ForwardRefRenderFunction<Ref, Props> = (
       srcDoc=""
       key={html}
       ref={iFrameRef}
-      style={{
-        display: visible ? undefined : "none",
-        width: visible ? (autoResize ? width : "100%") : "0px",
-        height: visible ? (autoResize ? height : "100%") : "0px",
-        minWidth: "100%",
-        ...style,
-      }}
       className={className}
       onLoad={onIFrameLoad}
-      {...iFrameProps}
+      {...props}
     />
   ) : null;
 };
diff --git a/src/components/atoms/Plugin/index.stories.tsx b/src/components/atoms/Plugin/index.stories.tsx
index b052e30aa..66d0d4db8 100644
--- a/src/components/atoms/Plugin/index.stories.tsx
+++ b/src/components/atoms/Plugin/index.stories.tsx
@@ -17,10 +17,12 @@ let cb: (message: any) => void | undefined;
 Default.args = {
   src: `${process.env.PUBLIC_URL}/plugins/plugin.js`,
   canBeVisible: true,
-  style: {
-    width: "300px",
-    height: "300px",
-    backgroundColor: "#fff",
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
   },
   exposed: ({ render, postMessage }) => ({
     console: {
@@ -49,10 +51,12 @@ export const HiddenIFrame: Story<Props> = args => <Component {...args} />;
 HiddenIFrame.args = {
   src: `${process.env.PUBLIC_URL}/plugins/hidden.js`,
   canBeVisible: true,
-  style: {
-    width: "300px",
-    height: "300px",
-    backgroundColor: "#fff",
+  iFrameProps: {
+    style: {
+      width: "300px",
+      height: "300px",
+      backgroundColor: "#fff",
+    },
   },
   exposed: ({ render, postMessage }) => ({
     console: {
diff --git a/src/components/atoms/Plugin/index.tsx b/src/components/atoms/Plugin/index.tsx
index 5b1d697e4..0b3734845 100644
--- a/src/components/atoms/Plugin/index.tsx
+++ b/src/components/atoms/Plugin/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties, IframeHTMLAttributes, ReactNode } from "react";
+import React, { IframeHTMLAttributes, ReactNode } from "react";
 
 import useHook, { IFrameAPI as IFrameAPIType } from "./hooks";
 import IFrame from "./IFrame";
@@ -9,10 +9,10 @@ export type Props = {
   className?: string;
   canBeVisible?: boolean;
   skip?: boolean;
-  style?: CSSProperties;
   src?: string;
   sourceCode?: string;
   renderPlaceholder?: ReactNode;
+  filled?: boolean;
   iFrameProps?: IframeHTMLAttributes<HTMLIFrameElement>;
   isMarshalable?: boolean | "json" | ((target: any) => boolean | "json");
   exposed?: ((api: IFrameAPI) => { [key: string]: any }) | { [key: string]: any };
@@ -26,10 +26,10 @@ const Plugin: React.FC<Props> = ({
   className,
   canBeVisible,
   skip,
-  style,
   src,
   sourceCode,
   renderPlaceholder,
+  filled,
   iFrameProps,
   isMarshalable,
   exposed,
@@ -52,9 +52,8 @@ const Plugin: React.FC<Props> = ({
 
   return iFrameHtml ? (
     <IFrame
-      autoResize
+      autoResize={!filled}
       className={className}
-      style={style}
       html={iFrameHtml}
       ref={iFrameRef}
       visible={iFrameVisible}
diff --git a/src/components/molecules/Visualizer/Plugin/hooks.ts b/src/components/molecules/Visualizer/Plugin/hooks.ts
index 84b7617b7..4c0f14e1c 100644
--- a/src/components/molecules/Visualizer/Plugin/hooks.ts
+++ b/src/components/molecules/Visualizer/Plugin/hooks.ts
@@ -1,7 +1,7 @@
 import { Options } from "quickjs-emscripten-sync";
 import { useCallback, useEffect, useMemo, useRef } from "react";
 
-import { IFrameAPI } from "@reearth/components/atoms/Plugin/hooks";
+import { IFrameAPI } from "@reearth/components/atoms/Plugin";
 import events, { EventEmitter, Events, mergeEvents } from "@reearth/util/event";
 
 import { exposed } from "./api";
diff --git a/src/components/molecules/Visualizer/Plugin/index.tsx b/src/components/molecules/Visualizer/Plugin/index.tsx
index f955ea181..d5660685a 100644
--- a/src/components/molecules/Visualizer/Plugin/index.tsx
+++ b/src/components/molecules/Visualizer/Plugin/index.tsx
@@ -1,4 +1,4 @@
-import React, { CSSProperties } from "react";
+import React from "react";
 
 import P, { Props as PluginProps } from "@reearth/components/atoms/Plugin";
 
@@ -19,7 +19,6 @@ export type { Props as ProviderProps, Context } from "./context";
 
 export type Props = {
   className?: string;
-  style?: CSSProperties;
   sourceCode?: string;
   pluginId?: string;
   extensionId?: string;
@@ -36,7 +35,6 @@ export type Props = {
 
 export default function Plugin({
   className,
-  style,
   sourceCode,
   pluginId,
   extensionId,
@@ -63,9 +61,9 @@ export default function Plugin({
   return !skip && (src || sourceCode) ? (
     <P
       className={className}
-      style={style}
       src={src}
       sourceCode={sourceCode}
+      filled={!!widget?.extended}
       iFrameProps={iFrameProps}
       canBeVisible={visible}
       isMarshalable={isMarshalable}
diff --git a/src/components/molecules/Visualizer/Plugin/types.ts b/src/components/molecules/Visualizer/Plugin/types.ts
index b9daa8637..6aa2d4718 100644
--- a/src/components/molecules/Visualizer/Plugin/types.ts
+++ b/src/components/molecules/Visualizer/Plugin/types.ts
@@ -113,7 +113,10 @@ export type Widget<P = any> = {
   extensionId?: string;
   property?: P;
   propertyId?: string;
-  extended: boolean;
+  extended?: {
+    horizontally: boolean;
+    vertically: boolean;
+  };
   layout?: WidgetLayout;
 };
 
@@ -238,7 +241,7 @@ export type LookAtDestination = {
 };
 
 export type CameraOptions = {
-  /** Expressed in milliseconds. Default is zero. */
+  /** Expressed in seconds. Default is zero. */
   duration?: number;
   /** Easing function. */
   easing?: (time: number) => number;
diff --git a/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx
index da5052136..9ce463c20 100644
--- a/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx
+++ b/src/components/molecules/Visualizer/Widget/Button/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       buttons: [
         {
diff --git a/src/components/molecules/Visualizer/Widget/Button/index.tsx b/src/components/molecules/Visualizer/Widget/Button/index.tsx
index 712856486..d44476712 100644
--- a/src/components/molecules/Visualizer/Widget/Button/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/Button/index.tsx
@@ -2,7 +2,7 @@ import React from "react";
 
 import { styled } from "@reearth/theme";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import MenuButton, { Button as ButtonType, MenuItem as MenuItemType } from "./MenuButton";
 
diff --git a/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx
index 7651591b7..9fabcd1bd 100644
--- a/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx
+++ b/src/components/molecules/Visualizer/Widget/Menu/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       buttons: [
         {
diff --git a/src/components/molecules/Visualizer/Widget/Menu/index.tsx b/src/components/molecules/Visualizer/Widget/Menu/index.tsx
index 9328d7071..559cb108b 100644
--- a/src/components/molecules/Visualizer/Widget/Menu/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/Menu/index.tsx
@@ -3,7 +3,7 @@ import React, { useMemo } from "react";
 
 import { styled } from "@reearth/theme";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import MenuButton, {
   Button as ButtonType,
diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx
index 0480f3661..d28ee32e8 100644
--- a/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx
+++ b/src/components/molecules/Visualizer/Widget/SplashScreen/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default: Story<Props> = args => (
 Default.args = {
   widget: {
     id: "",
-    extended: false,
     property: {
       overlay: {
         overlayEnabled: true,
diff --git a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx
index a5db30f07..68a32d983 100644
--- a/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/SplashScreen/index.tsx
@@ -6,7 +6,7 @@ import { styled } from "@reearth/theme";
 import { Camera } from "@reearth/util/value";
 
 import { useContext } from "../../Plugin";
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 export type Props = WidgetProps<Property>;
 
diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx
index 7e2c178fd..6321b6f46 100644
--- a/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx
+++ b/src/components/molecules/Visualizer/Widget/Storytelling/index.stories.tsx
@@ -21,7 +21,6 @@ export const Default = Template.bind({});
 
 Default.args = {
   widget: {
-    extended: false,
     id: "",
     property: {
       stories: [
@@ -39,7 +38,6 @@ export const AutoStart = Template.bind({});
 
 AutoStart.args = {
   widget: {
-    extended: false,
     id: "",
     property: {
       stories: [
diff --git a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
index e81a4be3e..5943e4d14 100644
--- a/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/Storytelling/index.tsx
@@ -8,7 +8,7 @@ import { styled, usePublishTheme, PublishTheme, css } from "@reearth/theme";
 import { metricsSizes } from "@reearth/theme/metrics";
 import { Camera as CameraValue } from "@reearth/util/value";
 
-import { Props as WidgetProps } from "../../Widget";
+import { ComponentProps as WidgetProps } from "../../Widget";
 
 import useHooks, { Story as StoryType } from "./hooks";
 
@@ -92,8 +92,8 @@ const Storytelling = ({ widget, sceneProperty }: Props): JSX.Element | null => {
       </Menu>
       <Wrapper
         publishedTheme={publishedTheme}
-        extended={widget?.extended}
-        floating={!widget?.layout}>
+        extended={!!widget.extended?.horizontally}
+        floating={!widget.layout}>
         <ArrowButton
           publishedTheme={publishedTheme}
           disabled={!selected?.index}
diff --git a/src/components/molecules/Visualizer/Widget/index.tsx b/src/components/molecules/Visualizer/Widget/index.tsx
index 4331088db..99e38e2b1 100644
--- a/src/components/molecules/Visualizer/Widget/index.tsx
+++ b/src/components/molecules/Visualizer/Widget/index.tsx
@@ -1,10 +1,12 @@
 import React, { ComponentType, useMemo } from "react";
 
-import Plugin, { Widget, WidgetLayout } from "../Plugin";
+import Plugin, { Widget as RawWidget, WidgetLayout, WidgetLocation } from "../Plugin";
 
 import builtin from "./builtin";
 
-export type { Widget, WidgetLayout } from "../Plugin";
+export type { WidgetLayout } from "../Plugin";
+
+export type Widget = Omit<RawWidget, "layout" | "extended"> & { extended?: boolean };
 
 export type Props<PP = any, SP = any> = {
   isEditable?: boolean;
@@ -16,7 +18,11 @@ export type Props<PP = any, SP = any> = {
   widgetLayout?: WidgetLayout;
 };
 
-export type Component<PP = any, SP = any> = ComponentType<Props<PP, SP>>;
+export type ComponentProps<PP = any, SP = any> = Omit<Props<PP, SP>, "widget"> & {
+  widget: RawWidget;
+};
+
+export type Component<PP = any, SP = any> = ComponentType<ComponentProps<PP, SP>>;
 
 export default function WidgetComponent<PP = any, SP = any>({
   widget,
@@ -25,17 +31,25 @@ export default function WidgetComponent<PP = any, SP = any>({
   ...props
 }: Props<PP, SP>) {
   const { align, location } = widgetLayout ?? {};
-  const w = useMemo<Widget | undefined>(
+  const w = useMemo<RawWidget | undefined>(
     () =>
       widget
         ? {
             ...widget,
+            extended: !widgetLayout
+              ? undefined
+              : {
+                  horizontally: !!widget.extended && isHorizontal(widgetLayout.location),
+                  vertically: !!widget.extended && isVertical(widgetLayout.location),
+                },
             layout: align && location ? { align, location } : undefined,
           }
         : undefined,
-    [widget, align, location],
+    [widget, widgetLayout, align, location],
   );
 
+  if (!w) return null;
+
   const Builtin =
     w?.pluginId && w.extensionId ? builtin[`${w.pluginId}/${w.extensionId}`] : undefined;
 
@@ -54,3 +68,11 @@ export default function WidgetComponent<PP = any, SP = any>({
     />
   );
 }
+
+function isHorizontal(l: WidgetLocation): boolean {
+  return l.section === "center";
+}
+
+function isVertical(l: WidgetLocation): boolean {
+  return l.area === "middle";
+}
diff --git a/src/components/molecules/Visualizer/WidgetAlignSystem/hooks.ts b/src/components/molecules/Visualizer/WidgetAlignSystem/hooks.ts
index e9f22a6cb..77d75de63 100644
--- a/src/components/molecules/Visualizer/WidgetAlignSystem/hooks.ts
+++ b/src/components/molecules/Visualizer/WidgetAlignSystem/hooks.ts
@@ -1,11 +1,11 @@
 import { useCallback } from "react";
 import type { Alignment } from "react-align";
 
-import { Widget as WidgetType } from "../Widget";
+import type { Widget } from "../Widget";
 
 export type { Alignment } from "react-align";
 
-export type Widget = Omit<WidgetType, "layout">;
+export type { Widget } from "../Widget";
 
 export type Location = {
   zone: "inner" | "outer";