diff --git a/bigbluebutton-html5/imports/ui/components/media/component.jsx b/bigbluebutton-html5/imports/ui/components/media/component.jsx
index 543d91fe2dc36f5e56793814e8ec79e01a40bb96..0c2894a3b74d1c01a72aaa6e992d85c8f96b266c 100644
--- a/bigbluebutton-html5/imports/ui/components/media/component.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/component.jsx
@@ -4,6 +4,7 @@ import cx from 'classnames';
 import { isMobile, isIPad13 } from 'react-device-detect';
 import WebcamDraggable from './webcam-draggable-overlay/component';
 import { styles } from './styles';
+import Storage from '../../services/storage/session';
 
 const BROWSER_ISMOBILE = isMobile || isIPad13;
 
@@ -15,7 +16,7 @@ const propTypes = {
   swapLayout: PropTypes.bool,
   disableVideo: PropTypes.bool,
   audioModalIsOpen: PropTypes.bool,
-  webcamPlacement: PropTypes.string,
+  webcamDraggableState: PropTypes.instanceOf(Object).isRequired,
 };
 
 const defaultProps = {
@@ -24,7 +25,6 @@ const defaultProps = {
   swapLayout: false,
   disableVideo: false,
   audioModalIsOpen: false,
-  webcamPlacement: 'top',
 };
 
 
@@ -47,9 +47,13 @@ export default class Media extends Component {
       children,
       audioModalIsOpen,
       usersVideo,
-      webcamPlacement,
+      webcamDraggableState,
     } = this.props;
 
+    const { placement } = webcamDraggableState;
+    const placementStorage = Storage.getItem('webcamPlacement');
+    const webcamPlacement = placement || placementStorage;
+
     const contentClassName = cx({
       [styles.content]: true,
     });
@@ -61,6 +65,7 @@ export default class Media extends Component {
     });
 
     const containerClassName = cx({
+      [styles.container]: true,
       [styles.containerV]: webcamPlacement === 'top' || webcamPlacement === 'bottom' || webcamPlacement === 'floating',
       [styles.containerH]: webcamPlacement === 'left' || webcamPlacement === 'right',
     });
@@ -102,16 +107,22 @@ export default class Media extends Component {
         >
           {children}
         </div>
-        <WebcamDraggable
-          refMediaContainer={this.refContainer}
-          swapLayout={swapLayout}
-          singleWebcam={singleWebcam}
-          usersVideoLenght={usersVideo.length}
-          hideOverlay={hideOverlay}
-          disableVideo={disableVideo}
-          audioModalIsOpen={audioModalIsOpen}
-          usersVideo={usersVideo}
-        />
+        {
+          usersVideo.length > 0
+            ? (
+              <WebcamDraggable
+                refMediaContainer={this.refContainer}
+                swapLayout={swapLayout}
+                singleWebcam={singleWebcam}
+                usersVideoLenght={usersVideo.length}
+                hideOverlay={hideOverlay}
+                disableVideo={disableVideo}
+                audioModalIsOpen={audioModalIsOpen}
+                usersVideo={usersVideo}
+              />
+            )
+            : null
+        }
       </div>
     );
   }
diff --git a/bigbluebutton-html5/imports/ui/components/media/container.jsx b/bigbluebutton-html5/imports/ui/components/media/container.jsx
index cafb2652c698a264428260082143e96c402e2e93..18393e340b794e219342329ffd3b70e526fa33a4 100755
--- a/bigbluebutton-html5/imports/ui/components/media/container.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/container.jsx
@@ -15,6 +15,7 @@ import ScreenshareContainer from '../screenshare/container';
 import DefaultContent from '../presentation/default-content/component';
 import ExternalVideoContainer from '../external-video-player/container';
 import Storage from '../../services/storage/session';
+import { withDraggableConsumer } from './webcam-draggable-overlay/context';
 
 const LAYOUT_CONFIG = Meteor.settings.public.layout;
 const KURENTO_CONFIG = Meteor.settings.public.kurento;
@@ -102,7 +103,7 @@ class MediaContainer extends Component {
   }
 }
 
-export default withModalMounter(withTracker(() => {
+export default withDraggableConsumer(withModalMounter(withTracker(() => {
   const { dataSaving } = Settings;
   const { viewParticipantsWebcams, viewScreenshare } = dataSaving;
   const hidePresentation = getFromUserSettings('bbb_hide_presentation', LAYOUT_CONFIG.hidePresentation);
@@ -152,4 +153,4 @@ export default withModalMounter(withTracker(() => {
 
   MediaContainer.propTypes = propTypes;
   return data;
-})(injectIntl(MediaContainer)));
+})(injectIntl(MediaContainer))));
diff --git a/bigbluebutton-html5/imports/ui/components/media/styles.scss b/bigbluebutton-html5/imports/ui/components/media/styles.scss
index 7eae08d37ad6c64bb700969458cd955c4d56c8cf..89f11ab0b92480a88796661e35e65c20425c7ccd 100644
--- a/bigbluebutton-html5/imports/ui/components/media/styles.scss
+++ b/bigbluebutton-html5/imports/ui/components/media/styles.scss
@@ -20,8 +20,6 @@ $after-content-order: 3;
   display: flex;
   align-items: center;
   justify-content: center;
-  flex-direction: column;
-  overflow: hidden;
 }
 
 .container {
diff --git a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
index 155886dcaff28bbc87de56abe02943123bc9fb3d..a0981de896110c2c1fc8fc6a6ac613bf2a7c6a73 100644
--- a/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
+++ b/bigbluebutton-html5/imports/ui/components/media/webcam-draggable-overlay/context.jsx
@@ -6,7 +6,7 @@ const { webcamsDefaultPlacement } = Meteor.settings.public.layout;
 export const WebcamDraggableContext = createContext();
 
 const initialState = {
-  placement: webcamsDefaultPlacement,
+  placement: webcamsDefaultPlacement || 'top',
   lastPlacementLandscape: 'top',
   lastPlacementPortrait: 'left',
   orientation: null,
diff --git a/bigbluebutton-html5/private/config/settings.yml b/bigbluebutton-html5/private/config/settings.yml
index 171e4df8dd5d23ffe484a188c1e010e9dfecefdb..3c1d57e43dc266169c668a2b2e451ecc502ee316 100755
--- a/bigbluebutton-html5/private/config/settings.yml
+++ b/bigbluebutton-html5/private/config/settings.yml
@@ -169,6 +169,7 @@ public:
   layout:
     autoSwapLayout: false
     hidePresentation: false
+    webcamsDefaultPlacement: "top"
   media:
     stunTurnServersFetchAddress: "/bigbluebutton/api/stuns"
     mediaTag: "#remote-media"