--- a/browser/components/loop/content/js/conversationViews.js
+++ b/browser/components/loop/content/js/conversationViews.js
@@ -560,42 +560,54 @@ loop.conversationViews = (function(mozL1
           )
         )
       );
     }
   });
 
   var OngoingConversationView = React.createClass({displayName: "OngoingConversationView",
     mixins: [
+      loop.store.StoreMixin("conversationStore"),
       sharedMixins.MediaSetupMixin
     ],
 
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      // local
       video: React.PropTypes.object,
-      audio: React.PropTypes.object
+      // local
+      audio: React.PropTypes.object,
+      remoteVideoEnabled: React.PropTypes.bool,
+      // This is used from the props rather than the state to make it easier for
+      // the ui-showcase.
+      mediaConnected: React.PropTypes.bool,
+      // The poster URLs are for UI-showcase testing and development.
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string
     },
 
     getDefaultProps: function() {
       return {
         video: {enabled: true, visible: true},
         audio: {enabled: true, visible: true}
       };
     },
 
+    getInitialState: function() {
+      return this.getStoreState();
+    },
+
     componentDidMount: function() {
       // The SDK needs to know about the configuration and the elements to use
       // for display. So the best way seems to pass the information here - ideally
       // the sdk wouldn't need to know this, but we can't change that.
       this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
         publisherConfig: this.getDefaultPublisherConfig({
           publishVideo: this.props.video.enabled
-        }),
-        getLocalElementFunc: this._getElement.bind(this, ".local"),
-        getRemoteElementFunc: this._getElement.bind(this, ".remote")
+        })
       }));
     },
 
     /**
      * Hangs up the call.
      */
     hangup: function() {
       this.props.dispatcher.dispatch(
@@ -611,33 +623,56 @@ loop.conversationViews = (function(mozL1
     publishStream: function(type, enabled) {
       this.props.dispatcher.dispatch(
         new sharedActions.SetMute({
           type: type,
           enabled: enabled
         }));
     },
 
+    shouldRenderRemoteVideo: function() {
+      if (this.props.mediaConnected) {
+        // If remote video is not enabled, we're muted, so we'll show an avatar
+        // instead.
+        return this.props.remoteVideoEnabled;
+      }
+
+      // We're not yet connected, but we don't want to show the avatar, and in
+      // the common case, we'll just transition to the video.
+      return true;
+    },
+
     render: function() {
       var localStreamClasses = React.addons.classSet({
         local: true,
         "local-stream": true,
         "local-stream-audio": !this.props.video.enabled
       });
 
       return (
         React.createElement("div", {className: "video-layout-wrapper"}, 
           React.createElement("div", {className: "conversation"}, 
             React.createElement("div", {className: "media nested"}, 
               React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
-                React.createElement("div", {className: "video_inner remote focus-stream"})
+                React.createElement("div", {className: "video_inner remote focus-stream"}, 
+                  React.createElement(sharedViews.MediaView, {displayAvatar: !this.shouldRenderRemoteVideo(), 
+                    posterUrl: this.props.remotePosterUrl, 
+                    mediaType: "remote", 
+                    srcVideoObject: this.state.remoteSrcVideoObject})
+                )
               ), 
-              React.createElement("div", {className: localStreamClasses})
+              React.createElement("div", {className: localStreamClasses}, 
+                React.createElement(sharedViews.MediaView, {displayAvatar: !this.props.video.enabled, 
+                  posterUrl: this.props.localPosterUrl, 
+                  mediaType: "local", 
+                  srcVideoObject: this.state.localSrcVideoObject})
+              )
             ), 
             React.createElement(loop.shared.views.ConversationToolbar, {
+              dispatcher: this.props.dispatcher, 
               video: this.props.video, 
               audio: this.props.audio, 
               publishStream: this.publishStream, 
               hangup: this.hangup})
           )
         )
       );
     }
@@ -737,17 +772,20 @@ loop.conversationViews = (function(mozL1
             contact: this.state.contact, 
             outgoing: this.state.outgoing}
           ));
         }
         case CALL_STATES.ONGOING: {
           return (React.createElement(OngoingConversationView, {
             dispatcher: this.props.dispatcher, 
             video: {enabled: !this.state.videoMuted}, 
-            audio: {enabled: !this.state.audioMuted}}
+            audio: {enabled: !this.state.audioMuted}, 
+            remoteVideoEnabled: this.state.remoteVideoEnabled, 
+            mediaConnected: this.state.mediaConnected, 
+            remoteSrcVideoObject: this.state.remoteSrcVideoObject}
             )
           );
         }
         case CALL_STATES.FINISHED: {
           this.play("terminated");
           return this._renderFeedbackView();
         }
         case CALL_STATES.INIT: {

--- a/browser/components/loop/content/js/conversationViews.jsx
+++ b/browser/components/loop/content/js/conversationViews.jsx
@@ -560,42 +560,54 @@ loop.conversationViews = (function(mozL1
           </div>
         </div>
       );
     }
   });
 
   var OngoingConversationView = React.createClass({
     mixins: [
+      loop.store.StoreMixin("conversationStore"),
       sharedMixins.MediaSetupMixin
     ],
 
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
+      // local
       video: React.PropTypes.object,
-      audio: React.PropTypes.object
+      // local
+      audio: React.PropTypes.object,
+      remoteVideoEnabled: React.PropTypes.bool,
+      // This is used from the props rather than the state to make it easier for
+      // the ui-showcase.
+      mediaConnected: React.PropTypes.bool,
+      // The poster URLs are for UI-showcase testing and development.
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string
     },
 
     getDefaultProps: function() {
       return {
         video: {enabled: true, visible: true},
         audio: {enabled: true, visible: true}
       };
     },
 
+    getInitialState: function() {
+      return this.getStoreState();
+    },
+
     componentDidMount: function() {
       // The SDK needs to know about the configuration and the elements to use
       // for display. So the best way seems to pass the information here - ideally
       // the sdk wouldn't need to know this, but we can't change that.
       this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
         publisherConfig: this.getDefaultPublisherConfig({
           publishVideo: this.props.video.enabled
-        }),
-        getLocalElementFunc: this._getElement.bind(this, ".local"),
-        getRemoteElementFunc: this._getElement.bind(this, ".remote")
+        })
       }));
     },
 
     /**
      * Hangs up the call.
      */
     hangup: function() {
       this.props.dispatcher.dispatch(
@@ -611,33 +623,56 @@ loop.conversationViews = (function(mozL1
     publishStream: function(type, enabled) {
       this.props.dispatcher.dispatch(
         new sharedActions.SetMute({
           type: type,
           enabled: enabled
         }));
     },
 
+    shouldRenderRemoteVideo: function() {
+      if (this.props.mediaConnected) {
+        // If remote video is not enabled, we're muted, so we'll show an avatar
+        // instead.
+        return this.props.remoteVideoEnabled;
+      }
+
+      // We're not yet connected, but we don't want to show the avatar, and in
+      // the common case, we'll just transition to the video.
+      return true;
+    },
+
     render: function() {
       var localStreamClasses = React.addons.classSet({
         local: true,
         "local-stream": true,
         "local-stream-audio": !this.props.video.enabled
       });
 
       return (
         <div className="video-layout-wrapper">
           <div className="conversation">
             <div className="media nested">
               <div className="video_wrapper remote_wrapper">
-                <div className="video_inner remote focus-stream"></div>
+                <div className="video_inner remote focus-stream">
+                  <sharedViews.MediaView displayAvatar={!this.shouldRenderRemoteVideo()}
+                    posterUrl={this.props.remotePosterUrl}
+                    mediaType="remote"
+                    srcVideoObject={this.state.remoteSrcVideoObject} />
+                </div>
               </div>
-              <div className={localStreamClasses}></div>
+              <div className={localStreamClasses}>
+                <sharedViews.MediaView displayAvatar={!this.props.video.enabled}
+                  posterUrl={this.props.localPosterUrl}
+                  mediaType="local"
+                  srcVideoObject={this.state.localSrcVideoObject} />
+              </div>
             </div>
             <loop.shared.views.ConversationToolbar
+              dispatcher={this.props.dispatcher}
               video={this.props.video}
               audio={this.props.audio}
               publishStream={this.publishStream}
               hangup={this.hangup} />
           </div>
         </div>
       );
     }
@@ -738,16 +773,19 @@ loop.conversationViews = (function(mozL1
             outgoing={this.state.outgoing}
           />);
         }
         case CALL_STATES.ONGOING: {
           return (<OngoingConversationView
             dispatcher={this.props.dispatcher}
             video={{enabled: !this.state.videoMuted}}
             audio={{enabled: !this.state.audioMuted}}
+            remoteVideoEnabled={this.state.remoteVideoEnabled}
+            mediaConnected={this.state.mediaConnected}
+            remoteSrcVideoObject={this.state.remoteSrcVideoObject}
             />
           );
         }
         case CALL_STATES.FINISHED: {
           this.play("terminated");
           return this._renderFeedbackView();
         }
         case CALL_STATES.INIT: {

--- a/browser/components/loop/content/js/roomViews.js
+++ b/browser/components/loop/content/js/roomViews.js
@@ -574,32 +574,32 @@ loop.roomViews = (function(mozL10n) {
       sharedMixins.DocumentTitleMixin,
       sharedMixins.MediaSetupMixin,
       sharedMixins.RoomsAudioMixin,
       sharedMixins.WindowCloseMixin
     ],
 
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
-      mozLoop: React.PropTypes.object.isRequired
+      mozLoop: React.PropTypes.object.isRequired,
+      // The poster URLs are for UI-showcase testing and development.
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string
     },
 
     componentWillUpdate: function(nextProps, nextState) {
       // The SDK needs to know about the configuration and the elements to use
       // for display. So the best way seems to pass the information here - ideally
       // the sdk wouldn't need to know this, but we can't change that.
       if (this.state.roomState !== ROOM_STATES.MEDIA_WAIT &&
           nextState.roomState === ROOM_STATES.MEDIA_WAIT) {
         this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
           publisherConfig: this.getDefaultPublisherConfig({
             publishVideo: !this.state.videoMuted
-          }),
-          getLocalElementFunc: this._getElement.bind(this, ".local"),
-          getScreenShareElementFunc: this._getElement.bind(this, ".screen"),
-          getRemoteElementFunc: this._getElement.bind(this, ".remote")
+          })
         }));
       }
     },
 
     /**
      * User clicked on the "Leave" button.
      */
     leaveRoom: function() {
@@ -630,16 +630,50 @@ loop.roomViews = (function(mozL10n) {
 
     _shouldRenderContextView: function() {
       return !!(
         this.props.mozLoop.getLoopPref("contextInConversations.enabled") &&
         (this.state.roomContextUrls || this.state.roomDescription)
       );
     },
 
+    /**
+     * Works out if remote video should be rended or not, depending on the
+     * room state and other flags.
+     *
+     * @return {Boolean} True if remote video should be rended.
+     */
+    shouldRenderRemoteVideo: function() {
+      switch(this.state.roomState) {
+        case ROOM_STATES.HAS_PARTICIPANTS:
+          if (this.state.remoteVideoEnabled) {
+            return true;
+          }
+
+          if (this.state.mediaConnected) {
+            // since the remoteVideo hasn't yet been enabled, if the
+            // media is connected, then we should be displaying an avatar.
+            return false;
+          }
+
+          return true;
+
+        case ROOM_STATES.SESSION_CONNECTED:
+        case ROOM_STATES.JOINED:
+          // this case is so that we don't show an avatar while waiting for
+          // the other party to connect
+          return true;
+
+        default:
+          console.warn("StandaloneRoomView.shouldRenderRemoteVideo:" +
+            " unexpected roomState: ", this.state.roomState);
+          return true;
+      }
+    },
+
     render: function() {
       if (this.state.roomName) {
         this.setTitle(this.state.roomName);
       }
 
       var localStreamClasses = React.addons.classSet({
         local: true,
         "local-stream": true,
@@ -669,36 +703,46 @@ loop.roomViews = (function(mozL10n) {
         }
         case ROOM_STATES.ENDED: {
           return (
             React.createElement(sharedViews.FeedbackView, {
               onAfterFeedbackReceived: this.closeWindow})
           );
         }
         default: {
+
           return (
             React.createElement("div", {className: "room-conversation-wrapper"}, 
               React.createElement(sharedViews.TextChatView, {dispatcher: this.props.dispatcher}), 
               React.createElement(DesktopRoomInvitationView, {
                 dispatcher: this.props.dispatcher, 
                 error: this.state.error, 
                 mozLoop: this.props.mozLoop, 
                 roomData: roomData, 
                 savingContext: this.state.savingContext, 
                 show: shouldRenderInvitationOverlay, 
                 showContext: shouldRenderContextView, 
                 socialShareProviders: this.state.socialShareProviders}), 
               React.createElement("div", {className: "video-layout-wrapper"}, 
                 React.createElement("div", {className: "conversation room-conversation"}, 
                   React.createElement("div", {className: "media nested"}, 
                     React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
-                      React.createElement("div", {className: "video_inner remote focus-stream"})
+                      React.createElement("div", {className: "video_inner remote focus-stream"}, 
+                        React.createElement(sharedViews.MediaView, {displayAvatar: !this.shouldRenderRemoteVideo(), 
+                          posterUrl: this.props.remotePosterUrl, 
+                          mediaType: "remote", 
+                          srcVideoObject: this.state.remoteSrcVideoObject})
+                      )
                     ), 
-                    React.createElement("div", {className: localStreamClasses}), 
-                    React.createElement("div", {className: "screen hide"})
+                    React.createElement("div", {className: localStreamClasses}, 
+                      React.createElement(sharedViews.MediaView, {displayAvatar: this.state.videoMuted, 
+                        posterUrl: this.props.localPosterUrl, 
+                        mediaType: "local", 
+                        srcVideoObject: this.state.localSrcVideoObject})
+                    )
                   ), 
                   React.createElement(sharedViews.ConversationToolbar, {
                     dispatcher: this.props.dispatcher, 
                     video: {enabled: !this.state.videoMuted, visible: true}, 
                     audio: {enabled: !this.state.audioMuted, visible: true}, 
                     publishStream: this.publishStream, 
                     hangup: this.leaveRoom, 
                     screenShare: screenShareData})

--- a/browser/components/loop/content/js/roomViews.jsx
+++ b/browser/components/loop/content/js/roomViews.jsx
@@ -574,32 +574,32 @@ loop.roomViews = (function(mozL10n) {
       sharedMixins.DocumentTitleMixin,
       sharedMixins.MediaSetupMixin,
       sharedMixins.RoomsAudioMixin,
       sharedMixins.WindowCloseMixin
     ],
 
     propTypes: {
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
-      mozLoop: React.PropTypes.object.isRequired
+      mozLoop: React.PropTypes.object.isRequired,
+      // The poster URLs are for UI-showcase testing and development.
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string
     },
 
     componentWillUpdate: function(nextProps, nextState) {
       // The SDK needs to know about the configuration and the elements to use
       // for display. So the best way seems to pass the information here - ideally
       // the sdk wouldn't need to know this, but we can't change that.
       if (this.state.roomState !== ROOM_STATES.MEDIA_WAIT &&
           nextState.roomState === ROOM_STATES.MEDIA_WAIT) {
         this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
           publisherConfig: this.getDefaultPublisherConfig({
             publishVideo: !this.state.videoMuted
-          }),
-          getLocalElementFunc: this._getElement.bind(this, ".local"),
-          getScreenShareElementFunc: this._getElement.bind(this, ".screen"),
-          getRemoteElementFunc: this._getElement.bind(this, ".remote")
+          })
         }));
       }
     },
 
     /**
      * User clicked on the "Leave" button.
      */
     leaveRoom: function() {
@@ -630,16 +630,50 @@ loop.roomViews = (function(mozL10n) {
 
     _shouldRenderContextView: function() {
       return !!(
         this.props.mozLoop.getLoopPref("contextInConversations.enabled") &&
         (this.state.roomContextUrls || this.state.roomDescription)
       );
     },
 
+    /**
+     * Works out if remote video should be rended or not, depending on the
+     * room state and other flags.
+     *
+     * @return {Boolean} True if remote video should be rended.
+     */
+    shouldRenderRemoteVideo: function() {
+      switch(this.state.roomState) {
+        case ROOM_STATES.HAS_PARTICIPANTS:
+          if (this.state.remoteVideoEnabled) {
+            return true;
+          }
+
+          if (this.state.mediaConnected) {
+            // since the remoteVideo hasn't yet been enabled, if the
+            // media is connected, then we should be displaying an avatar.
+            return false;
+          }
+
+          return true;
+
+        case ROOM_STATES.SESSION_CONNECTED:
+        case ROOM_STATES.JOINED:
+          // this case is so that we don't show an avatar while waiting for
+          // the other party to connect
+          return true;
+
+        default:
+          console.warn("StandaloneRoomView.shouldRenderRemoteVideo:" +
+            " unexpected roomState: ", this.state.roomState);
+          return true;
+      }
+    },
+
     render: function() {
       if (this.state.roomName) {
         this.setTitle(this.state.roomName);
       }
 
       var localStreamClasses = React.addons.classSet({
         local: true,
         "local-stream": true,
@@ -669,36 +703,46 @@ loop.roomViews = (function(mozL10n) {
         }
         case ROOM_STATES.ENDED: {
           return (
             <sharedViews.FeedbackView
               onAfterFeedbackReceived={this.closeWindow} />
           );
         }
         default: {
+
           return (
             <div className="room-conversation-wrapper">
               <sharedViews.TextChatView dispatcher={this.props.dispatcher} />
               <DesktopRoomInvitationView
                 dispatcher={this.props.dispatcher}
                 error={this.state.error}
                 mozLoop={this.props.mozLoop}
                 roomData={roomData}
                 savingContext={this.state.savingContext}
                 show={shouldRenderInvitationOverlay}
                 showContext={shouldRenderContextView}
                 socialShareProviders={this.state.socialShareProviders} />
               <div className="video-layout-wrapper">
                 <div className="conversation room-conversation">
                   <div className="media nested">
                     <div className="video_wrapper remote_wrapper">
-                      <div className="video_inner remote focus-stream"></div>
+                      <div className="video_inner remote focus-stream">
+                        <sharedViews.MediaView displayAvatar={!this.shouldRenderRemoteVideo()}
+                          posterUrl={this.props.remotePosterUrl}
+                          mediaType="remote"
+                          srcVideoObject={this.state.remoteSrcVideoObject} />
+                      </div>
                     </div>
-                    <div className={localStreamClasses}></div>
-                    <div className="screen hide"></div>
+                    <div className={localStreamClasses}>
+                      <sharedViews.MediaView displayAvatar={this.state.videoMuted}
+                        posterUrl={this.props.localPosterUrl}
+                        mediaType="local"
+                        srcVideoObject={this.state.localSrcVideoObject} />
+                    </div>
                   </div>
                   <sharedViews.ConversationToolbar
                     dispatcher={this.props.dispatcher}
                     video={{enabled: !this.state.videoMuted, visible: true}}
                     audio={{enabled: !this.state.audioMuted, visible: true}}
                     publishStream={this.publishStream}
                     hangup={this.leaveRoom}
                     screenShare={screenShareData} />

--- a/browser/components/loop/content/shared/css/conversation.css
+++ b/browser/components/loop/content/shared/css/conversation.css
@@ -249,16 +249,22 @@
 .fx-embedded .remote_wrapper {
   position: absolute;
   top: 0px;
   right: 0px;
   bottom: 0px;
   left: 0px;
 }
 
+.fx-embedded .no-video {
+  background: black none repeat scroll 0% 0%;
+  height: 100%;
+  width: 100%;
+}
+
 .standalone .local-stream,
 .standalone .remote-inset-stream {
   /* required to have it superimposed to the control toolbar */
   z-index: 1001;
 }
 
 .standalone .room-conversation .local-stream,
 .standalone .room-conversation .remote-inset-stream {
@@ -507,21 +513,16 @@
   position: absolute;
   right: 3px;
   bottom: 5px;
   /* next two lines are workaround for lack of object-fit; see bug 1020445 */
   max-width: 140px;
   width: 30%;
   height: 28%;
   max-height: 105px;
-  box-shadow: 0px 2px 4px rgba(0,0,0,.5);
-}
-
-.fx-embedded .room-conversation .local-stream {
-  box-shadow: none;
 }
 
 .fx-embedded .local-stream.room-preview {
   top: 0px;
   left: 0px;
   right: 0px;
   bottom: 0px;
   height: 100%;
@@ -536,82 +537,41 @@
   width: 100%;
   top: 0;
   bottom: 0;
   left: 0;
   right: 0;
 }
 
 /*
- * XXX this approach is fragile because it makes assumptions
- * about the generated OT markup, any change will break it
- */
-
-/*
  * For any audio-only streams, we want to display our own background
  */
-.OT_audio-only .OT_widget-container .OT_video-poster {
+.avatar {
   background-image: url("../img/audio-call-avatar.svg");
   background-repeat: no-repeat;
   background-color: #4BA6E7;
   background-size: contain;
   background-position: center;
-}
 
-/*
- * Audio-only. For local streams, cancel out the SDK's opacity of 0.25.
- * For remote streams we leave them shaded, as otherwise its too bright.
- */
-.local-stream-audio .OT_publisher .OT_video-poster {
-  opacity: 1
-}
-
-/*
- * In audio-only mode, don't display the video element, doing so interferes
- * with the background opacity of the video-poster element.
- */
-.OT_audio-only .OT_widget-container .OT_video-element {
-  display: none;
+  /*
+   * Expand to fill the available space, since there is no video any
+   * intrinsic width. XXX should really change to an <img> for clarity
+   */
+  height: 100%;
+  width: 100%;
 }
 
-/*
- * Ensure that the publisher (i.e. local) video is never cropped, so that it's
- * not possible for someone to be presented with a picture that displays
- * (for example) a person from the neck up, even though the camera is capturing
- * and transmitting a picture of that person from the waist up.
- *
- * The !importants are necessary to override the SDK attempts to avoid
- * letterboxing entirely.
- *
- * If we could easily use test video streams with the SDK (eg if initPublisher
- * supported something like a "testMediaToStreamURI" parameter that it would
- * use to source the stream rather than the output of gUM, it wouldn't be too
- * hard to generate a video with a 1 pixel border at the edges that one could
- * at least visually see wasn't being cropped.
- *
- * Another less ugly possibility would be to work with Ted Mielczarek to use
- * the fake camera drivers he has for Linux.
- */
-.room-conversation .OT_publisher .OT_widget-container {
-  height: 100% !important;
-  width: 100% !important;
-  top: 0 !important;
-  left: 0 !important;
-  background-color: transparent; /* avoid visually obvious letterboxing */
+.local .avatar {
+  position: absolute;
+  z-index: 1;
 }
 
-.room-conversation .OT_publisher .OT_widget-container video {
-  background-color: transparent; /* avoid visually obvious letterboxing */
-}
-
-.fx-embedded .room-conversation .room-preview .OT_publisher .OT_widget-container,
-.fx-embedded .room-conversation .room-preview .OT_publisher .OT_widget-container video {
-  /* Desktop conversation window room preview local stream actually wants
-     a black background */
-  background-color: #000;
+.remote .avatar {
+  /* make visually distinct from local avatar */
+  opacity: 0.25;
 }
 
 .fx-embedded .media.nested {
   min-height: 200px;
 }
 
 .fx-embedded-call-identifier {
   display: inline;
@@ -707,17 +667,18 @@ html, .fx-embedded, #main,
   width: 100%;
 }
 
 .fx-embedded .text-chat-box {
   width: 100%;
   margin: auto;
 }
 
-@media screen and (min-width:640px) {
+/* We use 641px rather than 640, as min-width and max-width are inclusive */
+@media screen and (min-width:641px) {
   .standalone .conversation-toolbar {
     position: absolute;
     bottom: 0;
     left: 0;
     right: 0;
   }
 
   .fx-embedded .local-stream {
@@ -761,21 +722,16 @@ html, .fx-embedded, #main,
   .standalone .conversation {
     height: 100%;
   }
 
   .standalone .media {
     height: 90%;
   }
 
-  .standalone .OT_subscriber {
-    height: 100%;
-    width: auto;
-  }
-
   .standalone .media.nested {
     min-height: 500px;
   }
 
   .standalone .remote-inset-stream {
     display: none;
   }
 
@@ -793,17 +749,17 @@ html, .fx-embedded, #main,
     flex-direction: column;
     align-items: center;
     justify-content: center;
     flex: 1 1 0%;
   }
 
   .standalone .video_wrapper.remote_wrapper {
     /* Because of OT markup we need to set a high flex value
-     * Flex rule assures remote and local streams stack on top of eachother
+     * Flex rule assures remote and local streams stack on top of each other
      * Computed width is not 100% unless the `width` rule */
     flex: 2;
     width: 100%;
     position: relative;
   }
 }
 
 @media screen and (max-width:420px) {
@@ -1273,17 +1229,17 @@ body[dir=rtl] .room-context-btn-edit {
 }
 
 .standalone .room-conversation .media {
   background: #000;
 }
 
 .standalone .room-conversation .video_wrapper.remote_wrapper {
   background-color: #4e4e4e;
-  width: 75%;
+  width: calc(75% - 10px); /* Take the left margin into account. */
 }
 
 .standalone .room-conversation .conversation-toolbar {
   background: #000;
   border: none;
 }
 
 .standalone .room-conversation .conversation-toolbar .btn-hangup-entry {
@@ -1396,19 +1352,52 @@ body[dir=rtl] .room-context-btn-edit {
 
 /* Avoid the privacy problem where a user can size the window so small that
  * part of the self view is not shown.  If the self view isn't completely
  * displayable...
  */
 @media screen and (max-height:160px) {
 
   /* disable the self view */
-  .standalone .OT_publisher {
+  .standalone .local-video {
     display: none;
   }
 
   /* and enable a message telling the user how to get it back */
   .standalone .self-view-hidden-message {
     display: inline;
     position: relative;
     top: 90px;
   }
 }
+
+.remote-video {
+  /* Since there is grey stuff behind us, avoid obvious letterboxing, only do
+   * this on remote video as local video has transparent background.
+   */
+  background-color: black;
+}
+
+.standalone .screen.focus-stream {
+  /* Since there is grey stuff behind us, avoid obvious letterboxing */
+  background-color: black;
+}
+
+.local-video {
+  width: 100%;
+  height: 100%;
+  /* Transform is to make the local video act like a mirror, as is the
+     convention in video conferencing systems. */
+  transform: scale(-1, 1);
+  transform-origin: 50% 50% 0;
+}
+
+.remote-video {
+  width: 100%;
+  height: 100%;
+  display: block;
+  position: absolute;
+}
+
+.screen-share-video {
+  width: 100%;
+  height: 100%;
+}

--- a/browser/components/loop/content/shared/js/actions.js
+++ b/browser/components/loop/content/shared/js/actions.js
@@ -188,24 +188,17 @@ loop.shared.actions = (function() {
     }),
 
     /**
      * Used by the ongoing views to notify stores about the elements
      * required for the sdk.
      */
     SetupStreamElements: Action.define("setupStreamElements", {
       // The configuration for the publisher/subscribe options
-      publisherConfig: Object,
-      // The local stream element
-      getLocalElementFunc: Function,
-      // The screen share element; optional until all conversation
-      // types support it.
-      // getScreenShareElementFunc: Function,
-      // The remote stream element
-      getRemoteElementFunc: Function
+      publisherConfig: Object
     }),
 
     /**
      * Used for notifying that local media has been obtained.
      */
     GotMediaPermission: Action.define("gotMediaPermission", {
     }),
 
@@ -221,16 +214,52 @@ loop.shared.actions = (function() {
      */
     VideoDimensionsChanged: Action.define("videoDimensionsChanged", {
       isLocal: Boolean,
       videoType: String,
       dimensions: Object
     }),
 
     /**
+     * Video has been enabled from the remote sender.
+     *
+     * XXX somewhat tangled up with remote video muting semantics; see bug
+     * 1171969
+     *
+     * @note if/when we want to untangle this, we'll may want to include the
+     *       reason provided by the SDK and documented hereI:
+     *       https://tokbox.com/opentok/libraries/client/js/reference/VideoEnabledChangedEvent.html
+     */
+    RemoteVideoEnabled: Action.define("remoteVideoEnabled", {
+      /* The SDK video object that the views will be copying the remote
+         stream from. */
+      srcVideoObject: Object
+    }),
+
+    /**
+     * Video has been disabled by the remote sender.
+     *
+     *  @see RemoteVideoEnabled
+     */
+    RemoteVideoDisabled: Action.define("remoteVideoDisabled", {
+    }),
+
+    /**
+     * Video from the local camera has been enabled.
+     *
+     * XXX we should implement a LocalVideoDisabled action to cleanly prevent
+     * leakage; see bug 1171978 for details
+     */
+    LocalVideoEnabled: Action.define("localVideoEnabled", {
+      /* The SDK video object that the views will be copying the remote
+         stream from. */
+      srcVideoObject: Object
+    }),
+
+    /**
      * Used to mute or unmute a stream
      */
     SetMute: Action.define("setMute", {
       // The part of the stream to enable, e.g. "audio" or "video"
       type: String,
       // Whether or not to enable the stream.
       enabled: Boolean
     }),
@@ -245,28 +274,32 @@ loop.shared.actions = (function() {
 
     /**
      * Used to end a screen share.
      */
     EndScreenShare: Action.define("endScreenShare", {
     }),
 
     /**
-     * Used to notifiy that screen sharing is active or not.
+     * Used to notify that screen sharing is active or not.
      */
     ScreenSharingState: Action.define("screenSharingState", {
       // One of loop.shared.utils.SCREEN_SHARE_STATES.
       state: String
     }),
 
     /**
      * Used to notify that a shared screen is being received (or not).
+     *
+     * XXX this is going to need to be split into two actions so when
+     * can display a spinner when the screen share is pending (bug 1171933)
      */
     ReceivingScreenShare: Action.define("receivingScreenShare", {
       receiving: Boolean
+      // srcVideoObject: Object (only present if receiving is true)
     }),
 
     /**
      * Creates a new room.
      * XXX: should move to some roomActions module - refs bug 1079284
      */
     CreateRoom: Action.define("createRoom", {
       // The localized template to use to name the new room

--- a/browser/components/loop/content/shared/js/activeRoomStore.js
+++ b/browser/components/loop/content/shared/js/activeRoomStore.js
@@ -72,34 +72,40 @@ loop.store.ActiveRoomStore = (function()
      * due to user choice, failure or other reason. It is a subset of
      * getInitialStoreState as some items (e.g. roomState, failureReason,
      * context information) can persist across room exit & re-entry.
      *
      * @type {Array}
      */
     _statesToResetOnLeave: [
       "audioMuted",
+      "localSrcVideoObject",
       "localVideoDimensions",
+      "mediaConnected",
       "receivingScreenShare",
+      "remoteSrcVideoObject",
       "remoteVideoDimensions",
+      "remoteVideoEnabled",
       "screenSharingState",
+      "screenShareVideoObject",
       "videoMuted"
     ],
 
     /**
      * Returns initial state data for this active room.
      *
      * When adding states, consider if _statesToResetOnLeave needs updating
      * as well.
      */
     getInitialStoreState: function() {
       return {
         roomState: ROOM_STATES.INIT,
         audioMuted: false,
         videoMuted: false,
+        remoteVideoEnabled: false,
         failureReason: undefined,
         // Tracks if the room has been used during this
         // session. 'Used' means at least one call has been placed
         // with it. Entering and leaving the room without seeing
         // anyone is not considered as 'used'
         used: false,
         localVideoDimensions: {},
         remoteVideoDimensions: {},
@@ -110,17 +116,20 @@ loop.store.ActiveRoomStore = (function()
         // The roomCryptoKey to decode the context data if necessary.
         roomCryptoKey: null,
         // The description for a room as stored in the context data.
         roomDescription: null,
         // Room information failed to be obtained for a reason. See ROOM_INFO_FAILURES.
         roomInfoFailure: null,
         // The name of the room.
         roomName: null,
-        socialShareProviders: null
+        // Social API state.
+        socialShareProviders: null,
+        // True if media has been connected both-ways.
+        mediaConnected: false
       };
     },
 
     /**
      * Handles a room failure.
      *
      * @param {sharedActions.RoomFailure} actionData
      */
@@ -164,21 +173,25 @@ loop.store.ActiveRoomStore = (function()
         "setMute",
         "screenSharingState",
         "receivingScreenShare",
         "remotePeerDisconnected",
         "remotePeerConnected",
         "windowUnload",
         "leaveRoom",
         "feedbackComplete",
+        "localVideoEnabled",
+        "remoteVideoEnabled",
+        "remoteVideoDisabled",
         "videoDimensionsChanged",
         "startScreenShare",
         "endScreenShare",
         "updateSocialShareInfo",
-        "connectionStatus"
+        "connectionStatus",
+        "mediaConnected"
       ]);
     },
 
     /**
      * Execute setupWindowData event action from the dispatcher. This gets
      * the room data from the mozLoop api, and dispatches an UpdateRoomInfo event.
      * It also dispatches JoinRoom as this action is only applicable to the desktop
      * client, and needs to auto-join.
@@ -546,42 +559,85 @@ loop.store.ActiveRoomStore = (function()
      */
     setMute: function(actionData) {
       var muteState = {};
       muteState[actionData.type + "Muted"] = !actionData.enabled;
       this.setStoreState(muteState);
     },
 
     /**
+     * Records the local video object for the room.
+     *
+     * @param {sharedActions.LocalVideoEnabled} actionData
+     */
+    localVideoEnabled: function(actionData) {
+      this.setStoreState({localSrcVideoObject: actionData.srcVideoObject});
+    },
+
+    /**
+     * Records the remote video object for the room.
+     *
+     * @param  {sharedActions.RemoteVideoEnabled} actionData
+     */
+    remoteVideoEnabled: function(actionData) {
+      this.setStoreState({
+        remoteVideoEnabled: true,
+        remoteSrcVideoObject: actionData.srcVideoObject
+      });
+    },
+
+    /**
+     * Records when remote video is disabled (e.g. due to mute).
+     */
+    remoteVideoDisabled: function() {
+      this.setStoreState({remoteVideoEnabled: false});
+    },
+
+    /**
+     * Records when the remote media has been connected.
+     */
+    mediaConnected: function() {
+      this.setStoreState({mediaConnected: true});
+    },
+
+    /**
      * Used to note the current screensharing state.
      */
     screenSharingState: function(actionData) {
       this.setStoreState({screenSharingState: actionData.state});
 
       this._mozLoop.setScreenShareState(
         this.getStoreState().windowId,
         actionData.state === SCREEN_SHARE_STATES.ACTIVE);
     },
 
     /**
      * Used to note the current state of receiving screenshare data.
+     *
+     * XXX this is going to need to be split into two actions so when
+     * can display a spinner when the screen share is pending (bug 1171933)
      */
     receivingScreenShare: function(actionData) {
       if (!actionData.receiving &&
           this.getStoreState().remoteVideoDimensions.screen) {
         // Remove the remote video dimensions for type screen as we're not
         // getting the share anymore.
         var newDimensions = _.extend(this.getStoreState().remoteVideoDimensions);
         delete newDimensions.screen;
         this.setStoreState({
           receivingScreenShare: actionData.receiving,
-          remoteVideoDimensions: newDimensions
+          remoteVideoDimensions: newDimensions,
+          screenShareVideoObject: null
         });
       } else {
-        this.setStoreState({receivingScreenShare: actionData.receiving});
+        this.setStoreState({
+          receivingScreenShare: actionData.receiving,
+          screenShareVideoObject: actionData.srcVideoObject ?
+                                  actionData.srcVideoObject : null
+        });
       }
     },
 
     /**
      * Handles switching browser (aka tab) sharing to a new window. Should
      * only be used for browser sharing.
      *
      * @param {Number} windowId  The new windowId to start sharing.
@@ -671,17 +727,20 @@ loop.store.ActiveRoomStore = (function()
     },
 
     /**
      * Handles a remote peer disconnecting from the session. As we currently only
      * support 2 participants, we declare the room as SESSION_CONNECTED as soon as
      * one participantleaves.
      */
     remotePeerDisconnected: function() {
-      this.setStoreState({roomState: ROOM_STATES.SESSION_CONNECTED});
+      this.setStoreState({
+        roomState: ROOM_STATES.SESSION_CONNECTED,
+        remoteSrcVideoObject: null
+      });
     },
 
     /**
      * Handles an SDK status update, forwarding it to the server.
      *
      * @param {sharedActions.ConnectionStatus} actionData
      */
     connectionStatus: function(actionData) {

--- a/browser/components/loop/content/shared/js/conversationStore.js
+++ b/browser/components/loop/content/shared/js/conversationStore.js
@@ -88,30 +88,33 @@ loop.store = loop.store || {};
         // A link for emailing once obtained from the server
         emailLink: undefined,
 
         // Call Connection information
         // The call id from the loop-server
         callId: undefined,
         // The caller id of the contacting side
         callerId: undefined,
+        // True if media has been connected both-ways.
+        mediaConnected: false,
         // The connection progress url to connect the websocket
         progressURL: undefined,
         // The websocket token that allows connection to the progress url
         websocketToken: undefined,
         // SDK API key
         apiKey: undefined,
         // SDK session ID
         sessionId: undefined,
         // SDK session token
         sessionToken: undefined,
-        // If the audio is muted
+        // If the local audio is muted
         audioMuted: false,
-        // If the video is muted
-        videoMuted: false
+        // If the local video is muted
+        videoMuted: false,
+        remoteVideoEnabled: false
       };
     },
 
     /**
      * Handles initialisation of the store.
      *
      * @param  {Object} options    Options object.
      */
@@ -227,16 +230,19 @@ loop.store = loop.store || {};
         "connectCall",
         "hangupCall",
         "remotePeerDisconnected",
         "cancelCall",
         "retryCall",
         "mediaConnected",
         "setMute",
         "fetchRoomEmailLink",
+        "localVideoEnabled",
+        "remoteVideoDisabled",
+        "remoteVideoEnabled",
         "windowUnload"
       ]);
 
       this.setStoreState({
         apiKey: actionData.apiKey,
         callerId: actionData.callerId,
         callId: actionData.callId,
         callState: CALL_STATES.GATHER,
@@ -403,16 +409,17 @@ loop.store = loop.store || {};
       }
     },
 
     /**
      * Notifies that all media is now connected
      */
     mediaConnected: function() {
       this._websocket.mediaUp();
+      this.setStoreState({mediaConnected: true});
     },
 
     /**
      * Records the mute state for the stream.
      *
      * @param {sharedActions.setMute} actionData The mute state for the stream type.
      */
     setMute: function(actionData) {
@@ -436,16 +443,54 @@ loop.store = loop.store || {};
           this.trigger("error:emailLink");
           return;
         }
         this.setStoreState({"emailLink": createdRoomData.roomUrl});
       }.bind(this));
     },
 
     /**
+     * Handles when the remote stream has been enabled and is supplied.
+     *
+     * @param  {sharedActions.RemoteVideoEnabled} actionData
+     */
+    remoteVideoEnabled: function(actionData) {
+      this.setStoreState({
+        remoteVideoEnabled: true,
+        remoteSrcVideoObject: actionData.srcVideoObject
+      });
+    },
+
+    /**
+     * Handles when the remote stream has been disabled, e.g. due to video mute.
+     *
+     * @param {sharedActions.RemoteVideoDisabled} actionData
+     */
+    remoteVideoDisabled: function(actionData) {
+      this.setStoreState({
+        remoteVideoEnabled: false,
+        remoteSrcVideoObject: undefined});
+    },
+
+    /**
+     * Handles when the local stream is supplied.
+     *
+     * XXX should write a localVideoDisabled action in otSdkDriver.js to
+     * positively ensure proper cleanup (handled by window teardown currently)
+     * (see bug 1171978)
+     *
+     * @param  {sharedActions.LocalVideoEnabled} actionData
+     */
+    localVideoEnabled: function(actionData) {
+      this.setStoreState({
+        localSrcVideoObject: actionData.srcVideoObject
+      });
+    },
+
+    /**
      * Called when the window is unloaded, either by code, or by the user
      * explicitly closing it.  Expected to do any necessary housekeeping, such
      * as shutting down the call cleanly and adding any relevant telemetry data.
      */
     windowUnload: function() {
       if (!this.getStoreState("outgoing") &&
           this.getStoreState("callState") === CALL_STATES.ALERTING &&
           this._websocket) {

--- a/browser/components/loop/content/shared/js/otSdkDriver.js
+++ b/browser/components/loop/content/shared/js/otSdkDriver.js
@@ -99,36 +99,38 @@ loop.OTSdkDriver = (function() {
     /**
      * Handles the setupStreamElements action. Saves the required data and
      * kicks off the initialising of the publisher.
      *
      * @param {sharedActions.SetupStreamElements} actionData The data associated
      *   with the action. See action.js.
      */
     setupStreamElements: function(actionData) {
-      this.getLocalElement = actionData.getLocalElementFunc;
-      this.getScreenShareElementFunc = actionData.getScreenShareElementFunc;
-      this.getRemoteElement = actionData.getRemoteElementFunc;
       this.publisherConfig = actionData.publisherConfig;
 
       this.sdk.on("exception", this._onOTException.bind(this));
 
       // At this state we init the publisher, even though we might be waiting for
       // the initial connect of the session. This saves time when setting up
       // the media.
       this._publishLocalStreams();
     },
 
     /**
      * Internal function to publish a local stream.
      * XXX This can be simplified when bug 1138851 is actioned.
      */
     _publishLocalStreams: function() {
-      this.publisher = this.sdk.initPublisher(this.getLocalElement(),
+      // We expect the local video to be muted automatically by the SDK. Hence
+      // we don't mute it manually here.
+      this._mockPublisherEl = document.createElement("div");
+
+      this.publisher = this.sdk.initPublisher(this._mockPublisherEl,
         _.extend(this._getDataChannelSettings, this._getCopyPublisherConfig));
+
       this.publisher.on("streamCreated", this._onLocalStreamCreated.bind(this));
       this.publisher.on("streamDestroyed", this._onLocalStreamDestroyed.bind(this));
       this.publisher.on("accessAllowed", this._onPublishComplete.bind(this));
       this.publisher.on("accessDenied", this._onPublishDenied.bind(this));
       this.publisher.on("accessDialogOpened",
         this._onAccessDialogOpened.bind(this));
     },
 
@@ -177,17 +179,19 @@ loop.OTSdkDriver = (function() {
       // For browser sharing, we store the window Id so that we can avoid unnecessary
       // re-triggers.
       if (options.videoSource === "browser") {
         this._windowId = options.constraints.browserWindow;
       }
 
       var config = _.extend(this._getCopyPublisherConfig, options);
 
-      this.screenshare = this.sdk.initPublisher(this.getScreenShareElementFunc(),
+      this._mockScreenSharePreviewEl = document.createElement("div");
+
+      this.screenshare = this.sdk.initPublisher(this._mockScreenSharePreviewEl,
         config);
       this.screenshare.on("accessAllowed", this._onScreenShareGranted.bind(this));
       this.screenshare.on("accessDenied", this._onScreenShareDenied.bind(this));
       this.screenshare.on("streamCreated", this._onScreenShareStreamCreated.bind(this));
 
       this._noteSharingState(options.videoSource, true);
     },
 
@@ -204,29 +208,30 @@ loop.OTSdkDriver = (function() {
       this._windowId = windowId;
       this.screenshare._.switchAcquiredWindow(windowId);
     },
 
     /**
      * Ends an active screenshare session. Return `true` when an active screen-
      * sharing session was ended or `false` when no session is active.
      *
-     * @type {Boolean}
+     * @returns {Boolean}
      */
     endScreenShare: function() {
       if (!this.screenshare) {
         return false;
       }
 
       this._notifyMetricsEvent("Publisher.streamDestroyed");
 
       this.session.unpublish(this.screenshare);
       this.screenshare.off("accessAllowed accessDenied streamCreated");
       this.screenshare.destroy();
       delete this.screenshare;
+      delete this._mockScreenSharePreviewEl;
       this._noteSharingState(this._windowId ? "browser" : "window", false);
       delete this._windowId;
       return true;
     },
 
     /**
      * Connects a session for the SDK, listening to the required events.
      *
@@ -284,16 +289,17 @@ loop.OTSdkDriver = (function() {
 
       this._noteConnectionLengthIfNeeded(this._getTwoWayMediaStartTime(), performance.now());
 
       // Also, tidy these variables ready for next time.
       delete this._sessionConnected;
       delete this._publisherReady;
       delete this._publishedLocalStream;
       delete this._subscribedRemoteStream;
+      delete this._mockPublisherEl;
       this.connections = {};
       this._setTwoWayMediaStartTime(this.CONNECTION_START_TIME_UNINITIALIZED);
     },
 
     /**
      * Oust all users from an ongoing session. This is typically done when a room
      * owner deletes the room.
      *
@@ -494,29 +500,33 @@ loop.OTSdkDriver = (function() {
      * Handles when a remote screen share is created, subscribing to
      * the stream, and notifying the stores that a share is being
      * received.
      *
      * @param {Stream} stream The SDK Stream:
      * https://tokbox.com/opentok/libraries/client/js/reference/Stream.html
      */
     _handleRemoteScreenShareCreated: function(stream) {
-      if (!this.getScreenShareElementFunc) {
-        return;
-      }
+      // Let the stores know first so they can update the display.
+      // XXX We do want to do this - we want them to start re-arranging the
+      // display so that we can a) indicate connecting, b) be ready for
+      // when we get the stream. However, we're currently limited by the fact
+      // the view calculations require the remote (aka screen share) element to
+      // be present and laid out. Hence, we need to drop this for the time being,
+      // and let the client know via _onScreenShareSubscribeCompleted.
+      // Bug 1171933 is going to look at fixing this.
+      // this.dispatcher.dispatch(new sharedActions.ReceivingScreenShare({
+      //  receiving: true
+      // }));
 
-      // Let the stores know first so they can update the display.
-      this.dispatcher.dispatch(new sharedActions.ReceivingScreenShare({
-        receiving: true
-      }));
-
-      var remoteElement = this.getScreenShareElementFunc();
-
-      this.session.subscribe(stream,
-        remoteElement, this._getCopyPublisherConfig);
+      // There's no audio for screen shares so we don't need to worry about mute.
+      this._mockScreenShareEl = document.createElement("div");
+      this.session.subscribe(stream, this._mockScreenShareEl,
+        this._getCopyPublisherConfig,
+        this._onScreenShareSubscribeCompleted.bind(this));
     },
 
     /**
      * Handles the event when the remote stream is created.
      *
      * @param {StreamEvent} event The event details:
      * https://tokbox.com/opentok/libraries/client/js/reference/StreamEvent.html
      */
@@ -531,44 +541,110 @@ loop.OTSdkDriver = (function() {
         }));
       }
 
       if (event.stream.videoType === "screen") {
         this._handleRemoteScreenShareCreated(event.stream);
         return;
       }
 
-      var remoteElement = this.getRemoteElement();
+      // Setting up the subscribe might want to be before the VideoDimensionsChange
+      // dispatch. If so, we might also want to consider moving the dispatch to
+      // _onSubscribeCompleted. However, this seems to work fine at the moment,
+      // so we haven't felt the need to move it.
+
+      // XXX This mock element currently handles playing audio for the session.
+      // We might want to consider making the react tree responsible for playing
+      // the audio, so that the incoming audio could be disable/tracked easly from
+      // the UI (bug 1171896).
+      this._mockSubscribeEl = document.createElement("div");
 
       this.subscriber = this.session.subscribe(event.stream,
-        remoteElement, this._getCopyPublisherConfig,
-        this._onRemoteSessionSubscribed.bind(this, event.stream.connection));
+        this._mockSubscribeEl, this._getCopyPublisherConfig,
+        this._onSubscribeCompleted.bind(this));
+    },
+
+    /**
+     * This method is passed as the "completionHandler" parameter to the SDK's
+     * Session.subscribe.
+     *
+     * @param err {(null|Error)} - null on success, an Error object otherwise
+     * @param sdkSubscriberObject {OT.Subscriber} - undocumented; returned on success
+     * @param subscriberVideo {HTMLVideoElement} - used for unit testing
+     */
+    _onSubscribeCompleted: function(err, sdkSubscriberObject, subscriberVideo) {
+      // XXX test for and handle errors better (bug 1172140)
+      if (err) {
+        console.log("subscribe error:", err);
+        return;
+      }
+
+      var sdkSubscriberVideo = subscriberVideo ? subscriberVideo :
+        this._mockSubscribeEl.querySelector("video");
+      if (!sdkSubscriberVideo) {
+        console.error("sdkSubscriberVideo unexpectedly falsy!");
+      }
+
+      sdkSubscriberObject.on("videoEnabled", this._onVideoEnabled.bind(this));
+      sdkSubscriberObject.on("videoDisabled", this._onVideoDisabled.bind(this));
+
+      // XXX for some reason, the SDK deliberately suppresses sending the
+      // videoEnabled event after subscribe, in spite of docs claiming
+      // otherwise, so we do it ourselves.
+      if (sdkSubscriberObject.stream.hasVideo) {
+        this.dispatcher.dispatch(new sharedActions.RemoteVideoEnabled({
+          srcVideoObject: sdkSubscriberVideo}));
+      }
 
       this._subscribedRemoteStream = true;
       if (this._checkAllStreamsConnected()) {
         this._setTwoWayMediaStartTime(performance.now());
         this.dispatcher.dispatch(new sharedActions.MediaConnected());
       }
+
+      this._setupDataChannelIfNeeded(sdkSubscriberObject.stream.connection);
+    },
+
+    /**
+     * This method is passed as the "completionHandler" parameter to the SDK's
+     * Session.subscribe.
+     *
+     * @param err {(null|Error)} - null on success, an Error object otherwise
+     * @param sdkSubscriberObject {OT.Subscriber} - undocumented; returned on success
+     * @param subscriberVideo {HTMLVideoElement} - used for unit testing
+     */
+    _onScreenShareSubscribeCompleted: function(err, sdkSubscriberObject, subscriberVideo) {
+      // XXX test for and handle errors better
+      if (err) {
+        console.log("subscribe error:", err);
+        return;
+      }
+
+      var sdkSubscriberVideo = subscriberVideo ? subscriberVideo :
+        this._mockScreenShareEl.querySelector("video");
+
+      // XXX no idea why this is necessary in addition to the dispatch in
+      // _handleRemoteScreenShareCreated.  Maybe these should be separate
+      // actions.  But even so, this shouldn't be necessary....
+      this.dispatcher.dispatch(new sharedActions.ReceivingScreenShare({
+        receiving: true, srcVideoObject: sdkSubscriberVideo
+      }));
+
     },
 
     /**
      * Once a remote stream has been subscribed to, this triggers the data
      * channel set-up routines. A data channel cannot be requested before this
      * time as the peer connection is not set up.
      *
-     * @param {OT.Connection} connection The OT connection class object.
-     * @param {OT.Error}      err        Indicates if there's been an error in
-     *                                    completing the subscribe.
+     * @param {OT.Connection} connection The OT connection class object.paul
+     * sched
+     *
      */
-    _onRemoteSessionSubscribed: function(connection, err) {
-      if (err) {
-        console.error(err);
-        return;
-      }
-
+    _setupDataChannelIfNeeded: function(connection) {
       if (this._useDataChannels) {
         this.session.signal({
           type: "readyForDataChannel",
           to: connection
         }, function(signalError) {
           if (signalError) {
             console.error(signalError);
           }
@@ -665,16 +741,22 @@ loop.OTSdkDriver = (function() {
      *
      * @param {StreamEvent} event The event details:
      * https://tokbox.com/opentok/libraries/client/js/reference/StreamEvent.html
      */
     _onLocalStreamCreated: function(event) {
       this._notifyMetricsEvent("Publisher.streamCreated");
 
       if (event.stream[STREAM_PROPERTIES.HAS_VIDEO]) {
+
+        var sdkLocalVideo = this._mockPublisherEl.querySelector("video");
+
+        this.dispatcher.dispatch(new sharedActions.LocalVideoEnabled(
+              {srcVideoObject: sdkLocalVideo}));
+
         this.dispatcher.dispatch(new sharedActions.VideoDimensionsChanged({
           isLocal: true,
           videoType: event.stream.videoType,
           dimensions: event.stream[STREAM_PROPERTIES.VIDEO_DIMENSIONS]
         }));
       }
     },
 
@@ -734,31 +816,35 @@ loop.OTSdkDriver = (function() {
      *
      * @param {StreamEvent} event The event details:
      * https://tokbox.com/opentok/libraries/client/js/reference/StreamEvent.html
      */
     _onRemoteStreamDestroyed: function(event) {
       this._notifyMetricsEvent("Session.streamDestroyed");
 
       if (event.stream.videoType !== "screen") {
+        delete this._mockSubscribeEl;
         return;
       }
 
       // All we need to do is notify the store we're no longer receiving,
       // the sdk should do the rest.
       this.dispatcher.dispatch(new sharedActions.ReceivingScreenShare({
         receiving: false
       }));
+
+      delete this._mockScreenShareEl;
     },
 
     /**
      * Handles the event when the remote stream is destroyed.
      */
     _onLocalStreamDestroyed: function() {
       this._notifyMetricsEvent("Publisher.streamDestroyed");
+      delete this._mockPublisherEl;
     },
 
     /**
      * Called from the sdk when the media access dialog is opened.
      * Prevents the default action, to prevent the SDK's "allow access"
      * dialog from being shown.
      *
      * @param {OT.Event} event
@@ -788,27 +874,30 @@ loop.OTSdkDriver = (function() {
      */
     _onPublishDenied: function(event) {
       // This prevents the SDK's "access denied" dialog showing.
       event.preventDefault();
 
       this.dispatcher.dispatch(new sharedActions.ConnectionFailure({
         reason: FAILURE_DETAILS.MEDIA_DENIED
       }));
+
+      delete this._mockPublisherEl;
     },
 
     _onOTException: function(event) {
       if (event.code === OT.ExceptionCodes.UNABLE_TO_PUBLISH &&
           event.message === "GetUserMedia") {
         // We free up the publisher here in case the store wants to try
         // grabbing the media again.
         if (this.publisher) {
           this.publisher.off("accessAllowed accessDenied accessDialogOpened streamCreated");
           this.publisher.destroy();
           delete this.publisher;
+          delete this._mockPublisherEl;
         }
         this.dispatcher.dispatch(new sharedActions.ConnectionFailure({
           reason: FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA
         }));
       }
     },
 
     /**
@@ -820,16 +909,52 @@ loop.OTSdkDriver = (function() {
           isLocal: event.stream.connection.id == this.session.connection.id,
           videoType: event.stream.videoType,
           dimensions: event.stream[STREAM_PROPERTIES.VIDEO_DIMENSIONS]
         }));
       }
     },
 
     /**
+     * Handle the (remote) VideoEnabled event from the subscriber object
+     * by dispatching an action with the (hidden) video element from
+     * which to copy the stream when attaching it to visible video element
+     * that the views control directly.
+     *
+     * @param event {OT.VideoEnabledChangedEvent} from the SDK
+     *
+     * @see https://tokbox.com/opentok/libraries/client/js/reference/VideoEnabledChangedEvent.html
+     * @private
+     */
+    _onVideoEnabled: function(event) {
+      var sdkSubscriberVideo = this._mockSubscribeEl.querySelector("video");
+      if (!sdkSubscriberVideo) {
+        console.error("sdkSubscriberVideo unexpectedly falsy!");
+      }
+
+      this.dispatcher.dispatch(
+        new sharedActions.RemoteVideoEnabled(
+          {srcVideoObject: sdkSubscriberVideo}));
+    },
+
+    /**
+     * Handle the SDK disabling of remote video by dispatching the
+     * appropriate event.
+     *
+     * @param event {OT.VideoEnabledChangedEvent) from the SDK
+     *
+     * @see https://tokbox.com/opentok/libraries/client/js/reference/VideoEnabledChangedEvent.html
+     * @private
+     */
+    _onVideoDisabled: function(event) {
+      this.dispatcher.dispatch(
+        new sharedActions.RemoteVideoDisabled());
+    },
+
+    /**
      * Publishes the local stream if the session is connected
      * and the publisher is ready.
      */
     _maybePublishLocalStream: function() {
       if (this._sessionConnected && this._publisherReady) {
         // We are clear to publish the stream to the session.
         this.session.publish(this.publisher);
 
@@ -863,16 +988,17 @@ loop.OTSdkDriver = (function() {
 
     /**
      * Called when a screenshare is denied. Notifies the other stores.
      */
     _onScreenShareDenied: function() {
       this.dispatcher.dispatch(new sharedActions.ScreenSharingState({
         state: SCREEN_SHARE_STATES.INACTIVE
       }));
+      delete this._mockScreenSharePreviewEl;
     },
 
     /**
      * Called when a screenshare stream is published.
      */
     _onScreenShareStreamCreated: function() {
       this._notifyMetricsEvent("Publisher.streamCreated");
     },

--- a/browser/components/loop/content/shared/js/views.js
+++ b/browser/components/loop/content/shared/js/views.js
@@ -673,19 +673,138 @@ loop.shared.views = (function(_, l10n) {
           this.props.label ?
             React.createElement("label", null, this.props.label) :
             null
         )
       );
     }
   });
 
+  /**
+   * Renders an avatar element for display when video is muted.
+   */
+  var AvatarView = React.createClass({displayName: "AvatarView",
+    mixins: [React.addons.PureRenderMixin],
+
+    render: function() {
+        return React.createElement("div", {className: "avatar"});
+    }
+  });
+
+  /**
+   * Renders a media element for display. This also handles displaying an avatar
+   * instead of the video, and attaching a video stream to the video element.
+   */
+  var MediaView = React.createClass({displayName: "MediaView",
+    // srcVideoObject should be ok for a shallow comparison, so we are safe
+    // to use the pure render mixin here.
+    mixins: [React.addons.PureRenderMixin],
+
+    PropTypes: {
+      displayAvatar: React.PropTypes.bool.isRequired,
+      posterUrl: React.PropTypes.string,
+      // Expecting "local" or "remote".
+      mediaType: React.PropTypes.string.isRequired,
+      srcVideoObject: React.PropTypes.object
+    },
+
+    componentDidMount: function() {
+      if (!this.props.displayAvatar) {
+        this.attachVideo(this.props.srcVideoObject);
+      }
+    },
+
+    componentDidUpdate: function() {
+      if (!this.props.displayAvatar) {
+        this.attachVideo(this.props.srcVideoObject);
+      }
+    },
+
+    /**
+     * Attaches a video stream from a donor video element to this component's
+     * video element if the component is displaying one.
+     *
+     * @param {Object} srcVideoObject The src video object to clone the stream
+     *                                from.
+     *
+     * XXX need to have a corresponding detachVideo or change this to syncVideo
+     * to protect from leaks (bug 1171978)
+     */
+    attachVideo: function(srcVideoObject) {
+      if (!srcVideoObject) {
+        // Not got anything to display.
+        return;
+      }
+
+      var videoElement = this.getDOMNode();
+
+      if (videoElement.tagName.toLowerCase() !== "video") {
+        // Must be displaying the avatar view, so don't try and attach video.
+        return;
+      }
+
+      // Set the src of our video element
+      var attrName = "";
+      if ("srcObject" in videoElement) {
+        // srcObject is according to the standard.
+        attrName = "srcObject";
+      } else if ("mozSrcObject" in videoElement) {
+        // mozSrcObject is for Firefox
+        attrName = "mozSrcObject";
+      } else if ("src" in videoElement) {
+        // src is for Chrome.
+        attrName = "src";
+      } else {
+        console.error("Error attaching stream to element - no supported attribute found");
+        return;
+      }
+
+      // If the object hasn't changed it, then don't reattach it.
+      if (videoElement[attrName] !== srcVideoObject[attrName]) {
+        videoElement[attrName] = srcVideoObject[attrName];
+      }
+      videoElement.play();
+    },
+
+    render: function() {
+      if (this.props.displayAvatar) {
+        return React.createElement(AvatarView, null);
+      }
+
+      if (!this.props.srcVideoObject && !this.props.posterUrl) {
+        return React.createElement("div", {className: "no-video"});
+      }
+
+      var optionalPoster = {};
+      if (this.props.posterUrl) {
+        optionalPoster.poster = this.props.posterUrl;
+      }
+
+      // For now, always mute media. For local media, we should be muted anyway,
+      // as we don't want to hear ourselves speaking.
+      //
+      // For remote media, we would ideally have this live video element in
+      // control of the audio, but due to the current method of not rendering
+      // the element at all when video is muted we have to rely on the hidden
+      // dom element in the sdk driver to play the audio.
+      // We might want to consider changing this if we add UI controls relating
+      // to the remote audio at some stage in the future.
+      return (
+        React.createElement("video", React.__spread({},  optionalPoster, 
+               {className: this.props.mediaType + "-video", 
+               muted: true}))
+      );
+    }
+  });
+
   return {
+    AvatarView: AvatarView,
     Button: Button,
     ButtonGroup: ButtonGroup,
     Checkbox: Checkbox,
     ConversationView: ConversationView,
     ConversationToolbar: ConversationToolbar,
     MediaControlButton: MediaControlButton,
+    MediaView: MediaView,
     ScreenShareControlButton: ScreenShareControlButton,
     NotificationListView: NotificationListView
   };
 })(_, navigator.mozL10n || document.mozL10n);

--- a/browser/components/loop/content/shared/js/views.jsx
+++ b/browser/components/loop/content/shared/js/views.jsx
@@ -673,19 +673,138 @@ loop.shared.views = (function(_, l10n) {
           {this.props.label ?
             <label>{this.props.label}</label> :
             null}
         </div>
       );
     }
   });
 
+  /**
+   * Renders an avatar element for display when video is muted.
+   */
+  var AvatarView = React.createClass({
+    mixins: [React.addons.PureRenderMixin],
+
+    render: function() {
+        return <div className="avatar"/>;
+    }
+  });
+
+  /**
+   * Renders a media element for display. This also handles displaying an avatar
+   * instead of the video, and attaching a video stream to the video element.
+   */
+  var MediaView = React.createClass({
+    // srcVideoObject should be ok for a shallow comparison, so we are safe
+    // to use the pure render mixin here.
+    mixins: [React.addons.PureRenderMixin],
+
+    PropTypes: {
+      displayAvatar: React.PropTypes.bool.isRequired,
+      posterUrl: React.PropTypes.string,
+      // Expecting "local" or "remote".
+      mediaType: React.PropTypes.string.isRequired,
+      srcVideoObject: React.PropTypes.object
+    },
+
+    componentDidMount: function() {
+      if (!this.props.displayAvatar) {
+        this.attachVideo(this.props.srcVideoObject);
+      }
+    },
+
+    componentDidUpdate: function() {
+      if (!this.props.displayAvatar) {
+        this.attachVideo(this.props.srcVideoObject);
+      }
+    },
+
+    /**
+     * Attaches a video stream from a donor video element to this component's
+     * video element if the component is displaying one.
+     *
+     * @param {Object} srcVideoObject The src video object to clone the stream
+     *                                from.
+     *
+     * XXX need to have a corresponding detachVideo or change this to syncVideo
+     * to protect from leaks (bug 1171978)
+     */
+    attachVideo: function(srcVideoObject) {
+      if (!srcVideoObject) {
+        // Not got anything to display.
+        return;
+      }
+
+      var videoElement = this.getDOMNode();
+
+      if (videoElement.tagName.toLowerCase() !== "video") {
+        // Must be displaying the avatar view, so don't try and attach video.
+        return;
+      }
+
+      // Set the src of our video element
+      var attrName = "";
+      if ("srcObject" in videoElement) {
+        // srcObject is according to the standard.
+        attrName = "srcObject";
+      } else if ("mozSrcObject" in videoElement) {
+        // mozSrcObject is for Firefox
+        attrName = "mozSrcObject";
+      } else if ("src" in videoElement) {
+        // src is for Chrome.
+        attrName = "src";
+      } else {
+        console.error("Error attaching stream to element - no supported attribute found");
+        return;
+      }
+
+      // If the object hasn't changed it, then don't reattach it.
+      if (videoElement[attrName] !== srcVideoObject[attrName]) {
+        videoElement[attrName] = srcVideoObject[attrName];
+      }
+      videoElement.play();
+    },
+
+    render: function() {
+      if (this.props.displayAvatar) {
+        return <AvatarView />;
+      }
+
+      if (!this.props.srcVideoObject && !this.props.posterUrl) {
+        return <div className="no-video"/>;
+      }
+
+      var optionalPoster = {};
+      if (this.props.posterUrl) {
+        optionalPoster.poster = this.props.posterUrl;
+      }
+
+      // For now, always mute media. For local media, we should be muted anyway,
+      // as we don't want to hear ourselves speaking.
+      //
+      // For remote media, we would ideally have this live video element in
+      // control of the audio, but due to the current method of not rendering
+      // the element at all when video is muted we have to rely on the hidden
+      // dom element in the sdk driver to play the audio.
+      // We might want to consider changing this if we add UI controls relating
+      // to the remote audio at some stage in the future.
+      return (
+        <video {...optionalPoster}
+               className={this.props.mediaType + "-video"}
+               muted />
+      );
+    }
+  });
+
   return {
+    AvatarView: AvatarView,
     Button: Button,
     ButtonGroup: ButtonGroup,
     Checkbox: Checkbox,
     ConversationView: ConversationView,
     ConversationToolbar: ConversationToolbar,
     MediaControlButton: MediaControlButton,
+    MediaView: MediaView,
     ScreenShareControlButton: ScreenShareControlButton,
     NotificationListView: NotificationListView
   };
 })(_, navigator.mozL10n || document.mozL10n);

--- a/browser/components/loop/standalone/content/js/standaloneMozLoop.js
+++ b/browser/components/loop/standalone/content/js/standaloneMozLoop.js
@@ -126,17 +126,16 @@ loop.StandaloneMozLoop = (function(mozL1
         data: JSON.stringify(roomData),
         beforeSend: function(xhr) {
           if (sessionToken) {
             xhr.setRequestHeader("Authorization", "Basic " + btoa(sessionToken));
           }
         },
         async: async,
         success: function(responseData) {
-          console.log("done");
           try {
             callback(null, validate(responseData, expectedProps));
           } catch (err) {
             console.error("Error requesting call info", err.message);
             callback(err);
           }
         }.bind(this),
         error: failureHandler.bind(this, callback)

--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.js
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.js
@@ -332,17 +332,21 @@ loop.standaloneRoomViews = (function(moz
     ],
 
     propTypes: {
       activeRoomStore: React.PropTypes.oneOfType([
         React.PropTypes.instanceOf(loop.store.ActiveRoomStore),
         React.PropTypes.instanceOf(loop.store.FxOSActiveRoomStore)
       ]).isRequired,
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
-      isFirefox: React.PropTypes.bool.isRequired
+      isFirefox: React.PropTypes.bool.isRequired,
+      // The poster URLs are for UI-showcase testing and development
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string,
+      screenSharePosterUrl: React.PropTypes.string
     },
 
     getInitialState: function() {
       var storeState = this.props.activeRoomStore.getStoreState();
       return _.extend({}, storeState, {
         // Used by the UI showcase.
         roomState: this.props.roomState || storeState.roomState
       });
@@ -380,20 +384,17 @@ loop.standaloneRoomViews = (function(moz
      *
      * @param  {Object} nextProps (Unused)
      * @param  {Object} nextState Next state object.
      */
     componentWillUpdate: function(nextProps, nextState) {
       if (this.state.roomState !== ROOM_STATES.MEDIA_WAIT &&
           nextState.roomState === ROOM_STATES.MEDIA_WAIT) {
         this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
-          publisherConfig: this.getDefaultPublisherConfig({publishVideo: true}),
-          getLocalElementFunc: this._getElement.bind(this, ".local"),
-          getRemoteElementFunc: this._getElement.bind(this, ".remote"),
-          getScreenShareElementFunc: this._getElement.bind(this, ".screen")
+          publisherConfig: this.getDefaultPublisherConfig({publishVideo: true})
         }));
       }
 
       if (this.state.roomState !== ROOM_STATES.JOINED &&
           nextState.roomState === ROOM_STATES.JOINED) {
         // This forces the video size to update - creating the publisher
         // first, and then connecting to the session doesn't seem to set the
         // initial size correctly.
@@ -406,31 +407,59 @@ loop.standaloneRoomViews = (function(moz
         this.resetDimensionsCache();
       }
 
       // When screen sharing stops.
       if (this.state.receivingScreenShare && !nextState.receivingScreenShare) {
         // Remove the custom screenshare styles on the remote camera.
         var node = this._getElement(".remote");
         node.removeAttribute("style");
+      }
 
-        // Force the video sizes to update.
+      if (this.state.receivingScreenShare != nextState.receivingScreenShare ||
+          this.state.remoteVideoEnabled != nextState.remoteVideoEnabled) {
         this.updateVideoContainer();
       }
     },
 
     joinRoom: function() {
       this.props.dispatcher.dispatch(new sharedActions.JoinRoom());
     },
 
     leaveRoom: function() {
       this.props.dispatcher.dispatch(new sharedActions.LeaveRoom());
     },
 
     /**
+     * Wrapper for window.matchMedia so that we use an appropriate version
+     * for the ui-showcase, which puts views inside of their own iframes.
+     *
+     * Currently, we use an icky hack, and the showcase conspires with
+     * react-frame-component to set iframe.contentWindow.matchMedia onto
+     * activeRoomStore.  Once React context matures a bit (somewhere between
+     * 0.14 and 1.0, apparently):
+     *
+     * https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#solution-make-context-parent-based-instead-of-owner-based
+     *
+     * we should be able to use those to clean this up.
+     *
+     * @param queryString
+     * @returns {MediaQueryList|null}
+     * @private
+     */
+    _matchMedia: function(queryString) {
+      if ("matchMedia" in this.state) {
+        return this.state.matchMedia(queryString);
+      } else if ("matchMedia" in window) {
+        return window.matchMedia(queryString);
+      }
+      return null;
+    },
+
+    /**
      * Toggles streaming status for a given stream type.
      *
      * @param  {String}  type     Stream type ("audio" or "video").
      * @param  {Boolean} enabled  Enabled stream flag.
      */
     publishStream: function(type, enabled) {
       this.props.dispatcher.dispatch(new sharedActions.SetMute({
         type: type,
@@ -453,30 +482,47 @@ loop.standaloneRoomViews = (function(moz
       var LOCAL_STREAM_OVERLAP = 0.25;
       // The minimum size of video height/width allowed by the sdk css.
       var SDK_MIN_SIZE = 48;
 
       var node = this._getElement(".local");
       var targetWidth;
 
       node.style.right = "auto";
-      if (window.matchMedia && window.matchMedia("screen and (max-width:640px)").matches) {
+      if (this._matchMedia("screen and (max-width:640px)").matches) {
         // For reduced screen widths, we just go for a fixed size and no overlap.
         targetWidth = 180;
         node.style.width = (targetWidth * ratio.width) + "px";
         node.style.height = (targetWidth * ratio.height) + "px";
         node.style.left = "auto";
       } else {
         // The local camera view should be a quarter of the size of the remote stream
         // and positioned to overlap with the remote stream at a quarter of its width.
 
         // Now position the local camera view correctly with respect to the remote
         // video stream or the screen share stream.
-        var remoteVideoDimensions = this.getRemoteVideoDimensions(
-          this.state.receivingScreenShare ? "screen" : "camera");
+        var remoteVideoDimensions;
+        var isScreenShare = this.state.receivingScreenShare;
+        var videoDisplayed = isScreenShare ?
+          this.state.screenShareVideoObject || this.props.screenSharePosterUrl :
+          this.state.remoteSrcVideoObject || this.props.remotePosterUrl;
+
+        if ((isScreenShare || this.shouldRenderRemoteVideo()) && videoDisplayed) {
+          remoteVideoDimensions = this.getRemoteVideoDimensions(
+            isScreenShare ? "screen" : "camera");
+        } else {
+          var remoteElement = this.getDOMNode().querySelector(".remote.focus-stream");
+          if (!remoteElement) {
+            return;
+          }
+          remoteVideoDimensions = {
+            streamWidth: remoteElement.offsetWidth,
+            offsetX: remoteElement.offsetLeft
+          };
+        }
 
         targetWidth = remoteVideoDimensions.streamWidth * LOCAL_STREAM_SIZE;
 
         var realWidth = targetWidth * ratio.width;
         var realHeight = targetWidth * ratio.height;
 
         // If we've hit the min size limits, then limit at the minimum.
         if (realWidth < SDK_MIN_SIZE) {
@@ -510,17 +556,17 @@ loop.standaloneRoomViews = (function(moz
      */
     updateRemoteCameraPosition: function(ratio) {
       // Nothing to do for screenshare
       if (!this.state.receivingScreenShare) {
         return;
       }
       // XXX For the time being, if we're a narrow screen, aka mobile, we don't display
       // the remote media (bug 1133534).
-      if (window.matchMedia && window.matchMedia("screen and (max-width:640px)").matches) {
+      if (this._matchMedia("screen and (max-width:640px)").matches) {
         return;
       }
 
       // 10px separation between the two streams.
       var LOCAL_REMOTE_SEPARATION = 10;
 
       var node = this._getElement(".remote");
       var localNode = this._getElement(".local");
@@ -552,19 +598,61 @@ loop.standaloneRoomViews = (function(moz
      * @return {Boolean}
      */
     _roomIsActive: function() {
       return this.state.roomState === ROOM_STATES.JOINED            ||
              this.state.roomState === ROOM_STATES.SESSION_CONNECTED ||
              this.state.roomState === ROOM_STATES.HAS_PARTICIPANTS;
     },
 
+    /**
+     * Works out if remote video should be rended or not, depending on the
+     * room state and other flags.
+     *
+     * @return {Boolean} True if remote video should be rended.
+     */
+    shouldRenderRemoteVideo: function() {
+      switch(this.state.roomState) {
+        case ROOM_STATES.HAS_PARTICIPANTS:
+          if (this.state.remoteVideoEnabled) {
+            return true;
+          }
+
+          if (this.state.mediaConnected) {
+            // since the remoteVideo hasn't yet been enabled, if the
+            // media is connected, then we should be displaying an avatar.
+            return false;
+          }
+
+          return true;
+
+        case ROOM_STATES.READY:
+        case ROOM_STATES.INIT:
+        case ROOM_STATES.JOINING:
+        case ROOM_STATES.SESSION_CONNECTED:
+        case ROOM_STATES.JOINED:
+        case ROOM_STATES.MEDIA_WAIT:
+          // this case is so that we don't show an avatar while waiting for
+          // the other party to connect
+          return true;
+
+        case ROOM_STATES.CLOSING:
+          // the other person has shown up, so we don't want to show an avatar
+          return true;
+
+        default:
+          console.warn("StandaloneRoomView.shouldRenderRemoteVideo:" +
+            " unexpected roomState: ", this.state.roomState);
+          return true;
+
+      }
+    },
+
     render: function() {
       var localStreamClasses = React.addons.classSet({
-        hide: !this._roomIsActive(),
         local: true,
         "local-stream": true,
         "local-stream-audio": this.state.videoMuted
       });
 
       var remoteStreamClasses = React.addons.classSet({
         "video_inner": true,
         "remote": true,
@@ -597,20 +685,35 @@ loop.standaloneRoomViews = (function(moz
                 roomContextUrls: this.state.roomContextUrls, 
                 roomName: this.state.roomName, 
                 roomInfoFailure: this.state.roomInfoFailure}), 
               React.createElement("div", {className: "media nested"}, 
                 React.createElement("span", {className: "self-view-hidden-message"}, 
                   mozL10n.get("self_view_hidden_message")
                 ), 
                 React.createElement("div", {className: "video_wrapper remote_wrapper"}, 
-                  React.createElement("div", {className: remoteStreamClasses}), 
-                  React.createElement("div", {className: screenShareStreamClasses})
+                  React.createElement("div", {className: remoteStreamClasses}, 
+                    React.createElement(sharedViews.MediaView, {displayAvatar: !this.shouldRenderRemoteVideo(), 
+                      posterUrl: this.props.remotePosterUrl, 
+                      mediaType: "remote", 
+                      srcVideoObject: this.state.remoteSrcVideoObject})
+                  ), 
+                  React.createElement("div", {className: screenShareStreamClasses}, 
+                    React.createElement(sharedViews.MediaView, {displayAvatar: false, 
+                      posterUrl: this.props.screenSharePosterUrl, 
+                      mediaType: "screen-share", 
+                      srcVideoObject: this.state.screenShareVideoObject})
+                  )
                 ), 
-                React.createElement("div", {className: localStreamClasses})
+                React.createElement("div", {className: localStreamClasses}, 
+                  React.createElement(sharedViews.MediaView, {displayAvatar: this.state.videoMuted, 
+                    posterUrl: this.props.localPosterUrl, 
+                    mediaType: "local", 
+                    srcVideoObject: this.state.localSrcVideoObject})
+                )
               ), 
               React.createElement(sharedViews.ConversationToolbar, {
                 dispatcher: this.props.dispatcher, 
                 video: {enabled: !this.state.videoMuted,
                         visible: this._roomIsActive()}, 
                 audio: {enabled: !this.state.audioMuted,
                         visible: this._roomIsActive()}, 
                 publishStream: this.publishStream, 

--- a/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
+++ b/browser/components/loop/standalone/content/js/standaloneRoomViews.jsx
@@ -332,17 +332,21 @@ loop.standaloneRoomViews = (function(moz
     ],
 
     propTypes: {
       activeRoomStore: React.PropTypes.oneOfType([
         React.PropTypes.instanceOf(loop.store.ActiveRoomStore),
         React.PropTypes.instanceOf(loop.store.FxOSActiveRoomStore)
       ]).isRequired,
       dispatcher: React.PropTypes.instanceOf(loop.Dispatcher).isRequired,
-      isFirefox: React.PropTypes.bool.isRequired
+      isFirefox: React.PropTypes.bool.isRequired,
+      // The poster URLs are for UI-showcase testing and development
+      localPosterUrl: React.PropTypes.string,
+      remotePosterUrl: React.PropTypes.string,
+      screenSharePosterUrl: React.PropTypes.string
     },
 
     getInitialState: function() {
       var storeState = this.props.activeRoomStore.getStoreState();
       return _.extend({}, storeState, {
         // Used by the UI showcase.
         roomState: this.props.roomState || storeState.roomState
       });
@@ -380,20 +384,17 @@ loop.standaloneRoomViews = (function(moz
      *
      * @param  {Object} nextProps (Unused)
      * @param  {Object} nextState Next state object.
      */
     componentWillUpdate: function(nextProps, nextState) {
       if (this.state.roomState !== ROOM_STATES.MEDIA_WAIT &&
           nextState.roomState === ROOM_STATES.MEDIA_WAIT) {
         this.props.dispatcher.dispatch(new sharedActions.SetupStreamElements({
-          publisherConfig: this.getDefaultPublisherConfig({publishVideo: true}),
-          getLocalElementFunc: this._getElement.bind(this, ".local"),
-          getRemoteElementFunc: this._getElement.bind(this, ".remote"),
-          getScreenShareElementFunc: this._getElement.bind(this, ".screen")
+          publisherConfig: this.getDefaultPublisherConfig({publishVideo: true})
         }));
       }
 
       if (this.state.roomState !== ROOM_STATES.JOINED &&
           nextState.roomState === ROOM_STATES.JOINED) {
         // This forces the video size to update - creating the publisher
         // first, and then connecting to the session doesn't seem to set the
         // initial size correctly.
@@ -406,31 +407,59 @@ loop.standaloneRoomViews = (function(moz
         this.resetDimensionsCache();
       }
 
       // When screen sharing stops.
       if (this.state.receivingScreenShare && !nextState.receivingScreenShare) {
         // Remove the custom screenshare styles on the remote camera.
         var node = this._getElement(".remote");
         node.removeAttribute("style");
+      }
 
-        // Force the video sizes to update.
+      if (this.state.receivingScreenShare != nextState.receivingScreenShare ||
+          this.state.remoteVideoEnabled != nextState.remoteVideoEnabled) {
         this.updateVideoContainer();
       }
     },
 
     joinRoom: function() {
       this.props.dispatcher.dispatch(new sharedActions.JoinRoom());
     },
 
     leaveRoom: function() {
       this.props.dispatcher.dispatch(new sharedActions.LeaveRoom());
     },
 
     /**
+     * Wrapper for window.matchMedia so that we use an appropriate version
+     * for the ui-showcase, which puts views inside of their own iframes.
+     *
+     * Currently, we use an icky hack, and the showcase conspires with
+     * react-frame-component to set iframe.contentWindow.matchMedia onto
+     * activeRoomStore.  Once React context matures a bit (somewhere between
+     * 0.14 and 1.0, apparently):
+     *
+     * https://facebook.github.io/react/blog/2015/02/24/streamlining-react-elements.html#solution-make-context-parent-based-instead-of-owner-based
+     *
+     * we should be able to use those to clean this up.
+     *
+     * @param queryString
+     * @returns {MediaQueryList|null}
+     * @private
+     */
+    _matchMedia: function(queryString) {
+      if ("matchMedia" in this.state) {
+        return this.state.matchMedia(queryString);
+      } else if ("matchMedia" in window) {
+        return window.matchMedia(queryString);
+      }
+      return null;
+    },
+
+    /**
      * Toggles streaming status for a given stream type.
      *
      * @param  {String}  type     Stream type ("audio" or "video").
      * @param  {Boolean} enabled  Enabled stream flag.
      */
     publishStream: function(type, enabled) {
       this.props.dispatcher.dispatch(new sharedActions.SetMute({
         type: type,
@@ -453,30 +482,47 @@ loop.standaloneRoomViews = (function(moz
       var LOCAL_STREAM_OVERLAP = 0.25;
       // The minimum size of video height/width allowed by the sdk css.
       var SDK_MIN_SIZE = 48;
 
       var node = this._getElement(".local");
       var targetWidth;
 
       node.style.right = "auto";
-      if (window.matchMedia && window.matchMedia("screen and (max-width:640px)").matches) {
+      if (this._matchMedia("screen and (max-width:640px)").matches) {
         // For reduced screen widths, we just go for a fixed size and no overlap.
         targetWidth = 180;
         node.style.width = (targetWidth * ratio.width) + "px";
         node.style.height = (targetWidth * ratio.height) + "px";
         node.style.left = "auto";
       } else {
         // The local camera view should be a quarter of the size of the remote stream
         // and positioned to overlap with the remote stream at a quarter of its width.
 
         // Now position the local camera view correctly with respect to the remote
         // video stream or the screen share stream.
-        var remoteVideoDimensions = this.getRemoteVideoDimensions(
-          this.state.receivingScreenShare ? "screen" : "camera");
+        var remoteVideoDimensions;
+        var isScreenShare = this.state.receivingScreenShare;
+        var videoDisplayed = isScreenShare ?
+          this.state.screenShareVideoObject || this.props.screenSharePosterUrl :
+          this.state.remoteSrcVideoObject || this.props.remotePosterUrl;
+
+        if ((isScreenShare || this.shouldRenderRemoteVideo()) && videoDisplayed) {
+          remoteVideoDimensions = this.getRemoteVideoDimensions(
+            isScreenShare ? "screen" : "camera");
+        } else {
+          var remoteElement = this.getDOMNode().querySelector(".remote.focus-stream");
+          if (!remoteElement) {
+            return;
+          }
+          remoteVideoDimensions = {
+            streamWidth: remoteElement.offsetWidth,
+            offsetX: remoteElement.offsetLeft
+          };
+        }
 
         targetWidth = remoteVideoDimensions.streamWidth * LOCAL_STREAM_SIZE;
 
         var realWidth = targetWidth * ratio.width;
         var realHeight = targetWidth * ratio.height;
 
         // If we've hit the min size limits, then limit at the minimum.
         if (realWidth < SDK_MIN_SIZE) {
@@ -510,17 +556,17 @@ loop.standaloneRoomViews = (function(moz
      */
     updateRemoteCameraPosition: function(ratio) {
       // Nothing to do for screenshare
       if (!this.state.receivingScreenShare) {
         return;
       }
       // XXX For the time being, if we're a narrow screen, aka mobile, we don't display
       // the remote media (bug 1133534).
-      if (window.matchMedia && window.matchMedia("screen and (max-width:640px)").matches) {
+      if (this._matchMedia("screen and (max-width:640px)").matches) {
         return;
       }
 
       // 10px separation between the two streams.
       var LOCAL_REMOTE_SEPARATION = 10;
 
       var node = this._getElement(".remote");
       var localNode = this._getElement(".local");
@@ -552,19 +598,61 @@ loop.standaloneRoomViews = (function(moz
      * @return {Boolean}
      */
     _roomIsActive: function() {
       return this.state.roomState === ROOM_STATES.JOINED            ||
              this.state.roomState === ROOM_STATES.SESSION_CONNECTED ||
              this.state.roomState === ROOM_STATES.HAS_PARTICIPANTS;
     },
 
+    /**
+     * Works out if remote video should be rended or not, depending on the
+     * room state and other flags.
+     *
+     * @return {Boolean} True if remote video should be rended.
+     */
+    shouldRenderRemoteVideo: function() {
+      switch(this.state.roomState) {
+        case ROOM_STATES.HAS_PARTICIPANTS:
+          if (this.state.remoteVideoEnabled) {
+            return true;
+          }
+
+          if (this.state.mediaConnected) {
+            // since the remoteVideo hasn't yet been enabled, if the
+            // media is connected, then we should be displaying an avatar.
+            return false;
+          }
+
+          return true;
+
+        case ROOM_STATES.READY:
+        case ROOM_STATES.INIT:
+        case ROOM_STATES.JOINING:
+        case ROOM_STATES.SESSION_CONNECTED:
+        case ROOM_STATES.JOINED:
+        case ROOM_STATES.MEDIA_WAIT:
+          // this case is so that we don't show an avatar while waiting for
+          // the other party to connect
+          return true;
+
+        case ROOM_STATES.CLOSING:
+          // the other person has shown up, so we don't want to show an avatar
+          return true;
+
+        default:
+          console.warn("StandaloneRoomView.shouldRenderRemoteVideo:" +
+            " unexpected roomState: ", this.state.roomState);
+          return true;
+
+      }
+    },
+
     render: function() {
       var localStreamClasses = React.addons.classSet({
-        hide: !this._roomIsActive(),
         local: true,
         "local-stream": true,
         "local-stream-audio": this.state.videoMuted
       });
 
       var remoteStreamClasses = React.addons.classSet({
         "video_inner": true,
         "remote": true,
@@ -597,20 +685,35 @@ loop.standaloneRoomViews = (function(moz
                 roomContextUrls={this.state.roomContextUrls}
                 roomName={this.state.roomName}
                 roomInfoFailure={this.state.roomInfoFailure} />
               <div className="media nested">
                 <span className="self-view-hidden-message">
                   {mozL10n.get("self_view_hidden_message")}
                 </span>
                 <div className="video_wrapper remote_wrapper">
-                  <div className={remoteStreamClasses}></div>
-                  <div className={screenShareStreamClasses}></div>
+                  <div className={remoteStreamClasses}>
+                    <sharedViews.MediaView displayAvatar={!this.shouldRenderRemoteVideo()}
+                      posterUrl={this.props.remotePosterUrl}
+                      mediaType="remote"
+                      srcVideoObject={this.state.remoteSrcVideoObject} />
+                  </div>
+                  <div className={screenShareStreamClasses}>
+                    <sharedViews.MediaView displayAvatar={false}
+                      posterUrl={this.props.screenSharePosterUrl}
+                      mediaType="screen-share"
+                      srcVideoObject={this.state.screenShareVideoObject} />
+                  </div>
                 </div>
-                <div className={localStreamClasses}></div>
+                <div className={localStreamClasses}>
+                  <sharedViews.MediaView displayAvatar={this.state.videoMuted}
+                    posterUrl={this.props.localPosterUrl}
+                    mediaType="local"
+                    srcVideoObject={this.state.localSrcVideoObject} />
+                </div>
               </div>
               <sharedViews.ConversationToolbar
                 dispatcher={this.props.dispatcher}
                 video={{enabled: !this.state.videoMuted,
                         visible: this._roomIsActive()}}
                 audio={{enabled: !this.state.audioMuted,
                         visible: this._roomIsActive()}}
                 publishStream={this.publishStream}

--- a/browser/components/loop/test/desktop-local/conversationViews_test.js
+++ b/browser/components/loop/test/desktop-local/conversationViews_test.js
@@ -3,18 +3,18 @@
 
 describe("loop.conversationViews", function () {
   "use strict";
 
   var expect = chai.expect;
   var TestUtils = React.addons.TestUtils;
   var sharedActions = loop.shared.actions;
   var sharedUtils = loop.shared.utils;
-  var sharedView = loop.shared.views;
-  var sandbox, view, dispatcher, contact, fakeAudioXHR;
+  var sharedViews = loop.shared.views;
+  var sandbox, view, dispatcher, contact, fakeAudioXHR, conversationStore;
   var fakeMozLoop, fakeWindow;
 
   var CALL_STATES = loop.store.CALL_STATES;
   var CALL_TYPES = loop.shared.utils.CALL_TYPES;
   var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
   var REST_ERRNOS = loop.shared.utils.REST_ERRNOS;
   var WEBSOCKET_REASONS = loop.shared.utils.WEBSOCKET_REASONS;
 
@@ -99,16 +99,29 @@ describe("loop.conversationViews", funct
       navigator: { mozLoop: fakeMozLoop },
       close: sinon.stub(),
       document: {},
       addEventListener: function() {},
       removeEventListener: function() {}
     };
     loop.shared.mixins.setRootObject(fakeWindow);
 
+    var feedbackStore = new loop.store.FeedbackStore(dispatcher, {
+      feedbackClient: {}
+    });
+    conversationStore = new loop.store.ConversationStore(dispatcher, {
+      client: {},
+      mozLoop: fakeMozLoop,
+      sdkDriver: {}
+    });
+
+    loop.store.StoreMixin.register({
+      conversationStore: conversationStore,
+      feedbackStore: feedbackStore
+    });
   });
 
   afterEach(function() {
     loop.shared.mixins.setRootObject(window);
     view = undefined;
     delete navigator.mozLoop;
     sandbox.restore();
   });
@@ -250,39 +263,30 @@ describe("loop.conversationViews", funct
 
         sinon.assert.calledOnce(dispatcher.dispatch);
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("name", "cancelCall"));
       });
   });
 
   describe("CallFailedView", function() {
-    var store, fakeAudio;
+    var fakeAudio;
 
     var contact = {email: [{value: "test@test.tld"}]};
 
     function mountTestComponent(options) {
       options = options || {};
       return TestUtils.renderIntoDocument(
         React.createElement(loop.conversationViews.CallFailedView, {
           dispatcher: dispatcher,
           contact: options.contact
         }));
     }
 
     beforeEach(function() {
-      store = new loop.store.ConversationStore(dispatcher, {
-        client: {},
-        mozLoop: navigator.mozLoop,
-        sdkDriver: {}
-      });
-      loop.store.StoreMixin.register({
-        conversationStore: store
-      });
-
       fakeAudio = {
         play: sinon.spy(),
         pause: sinon.spy(),
         removeAttribute: sinon.spy()
       };
       sandbox.stub(window, "Audio").returns(fakeAudio);
     });
 
@@ -352,170 +356,214 @@ describe("loop.conversationViews", funct
         React.addons.TestUtils.Simulate.click(emailLinkBtn);
 
         expect(view.getDOMNode().querySelector(".btn-email").disabled).eql(true);
       });
 
     it("should compose an email once the email link is received", function() {
       var composeCallUrlEmail = sandbox.stub(sharedUtils, "composeCallUrlEmail");
       view = mountTestComponent({contact: contact});
-      store.setStoreState({emailLink: "http://fake.invalid/"});
+      conversationStore.setStoreState({emailLink: "http://fake.invalid/"});
 
       sinon.assert.calledOnce(composeCallUrlEmail);
       sinon.assert.calledWithExactly(composeCallUrlEmail,
         "http://fake.invalid/", "test@test.tld");
     });
 
     it("should close the conversation window once the email link is received",
       function() {
         view = mountTestComponent({contact: contact});
 
-        store.setStoreState({emailLink: "http://fake.invalid/"});
+        conversationStore.setStoreState({emailLink: "http://fake.invalid/"});
 
         sinon.assert.calledOnce(fakeWindow.close);
       });
 
     it("should display an error message in case email link retrieval failed",
       function() {
         view = mountTestComponent({contact: contact});
 
-        store.trigger("error:emailLink");
+        conversationStore.trigger("error:emailLink");
 
         expect(view.getDOMNode().querySelector(".error")).not.eql(null);
       });
 
     it("should allow retrying to get a call url if it failed previously",
       function() {
         view = mountTestComponent({contact: contact});
 
-        store.trigger("error:emailLink");
+        conversationStore.trigger("error:emailLink");
 
         expect(view.getDOMNode().querySelector(".btn-email").disabled).eql(false);
       });
 
     it("should play a failure sound, once", function() {
       view = mountTestComponent({contact: contact});
 
       sinon.assert.calledOnce(navigator.mozLoop.getAudioBlob);
       sinon.assert.calledWithExactly(navigator.mozLoop.getAudioBlob,
                                      "failure", sinon.match.func);
       sinon.assert.calledOnce(fakeAudio.play);
       expect(fakeAudio.loop).to.equal(false);
     });
 
     it("should show 'something went wrong' when the reason is WEBSOCKET_REASONS.MEDIA_FAIL",
       function () {
-        store.setStoreState({callStateReason: WEBSOCKET_REASONS.MEDIA_FAIL});
+        conversationStore.setStoreState({callStateReason: WEBSOCKET_REASONS.MEDIA_FAIL});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWith(document.mozL10n.get, "generic_failure_title");
       });
 
     it("should show 'contact unavailable' when the reason is WEBSOCKET_REASONS.REJECT",
       function () {
-        store.setStoreState({callStateReason: WEBSOCKET_REASONS.REJECT});
+        conversationStore.setStoreState({callStateReason: WEBSOCKET_REASONS.REJECT});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWithExactly(document.mozL10n.get,
           "contact_unavailable_title",
           {contactName: loop.conversationViews._getContactDisplayName(contact)});
       });
 
     it("should show 'contact unavailable' when the reason is WEBSOCKET_REASONS.BUSY",
       function () {
-        store.setStoreState({callStateReason: WEBSOCKET_REASONS.BUSY});
+        conversationStore.setStoreState({callStateReason: WEBSOCKET_REASONS.BUSY});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWithExactly(document.mozL10n.get,
           "contact_unavailable_title",
           {contactName: loop.conversationViews._getContactDisplayName(contact)});
       });
 
     it("should show 'something went wrong' when the reason is 'setup'",
       function () {
-        store.setStoreState({callStateReason: "setup"});
+        conversationStore.setStoreState({callStateReason: "setup"});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWithExactly(document.mozL10n.get,
           "generic_failure_title");
       });
 
     it("should show 'contact unavailable' when the reason is REST_ERRNOS.USER_UNAVAILABLE",
       function () {
-        store.setStoreState({callStateReason: REST_ERRNOS.USER_UNAVAILABLE});
+        conversationStore.setStoreState({callStateReason: REST_ERRNOS.USER_UNAVAILABLE});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWithExactly(document.mozL10n.get,
           "contact_unavailable_title",
           {contactName: loop.conversationViews._getContactDisplayName(contact)});
       });
 
     it("should show 'no media' when the reason is FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA",
       function () {
-        store.setStoreState({callStateReason: FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA});
+        conversationStore.setStoreState({callStateReason: FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA});
 
         view = mountTestComponent({contact: contact});
 
         sinon.assert.calledWithExactly(document.mozL10n.get, "no_media_failure_message");
       });
 
     it("should display a generic contact unavailable msg when the reason is" +
        " WEBSOCKET_REASONS.BUSY and no display name is available", function() {
-        store.setStoreState({callStateReason: WEBSOCKET_REASONS.BUSY});
+        conversationStore.setStoreState({callStateReason: WEBSOCKET_REASONS.BUSY});
         var phoneOnlyContact = {
           tel: [{"pref": true, type: "work", value: ""}]
         };
 
         view = mountTestComponent({contact: phoneOnlyContact});
 
         sinon.assert.calledWith(document.mozL10n.get,
           "generic_contact_unavailable_title");
     });
   });
 
   describe("OngoingConversationView", function() {
-    function mountTestComponent(props) {
+    function mountTestComponent(extraProps) {
+      var props = _.extend({
+        dispatcher: dispatcher
+      }, extraProps);
       return TestUtils.renderIntoDocument(
         React.createElement(loop.conversationViews.OngoingConversationView, props));
     }
 
     it("should dispatch a setupStreamElements action when the view is created",
       function() {
-        view = mountTestComponent({
-          dispatcher: dispatcher
-        });
+        view = mountTestComponent();
 
         sinon.assert.calledOnce(dispatcher.dispatch);
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("name", "setupStreamElements"));
       });
 
+    it("should display an avatar for remote video when the stream is not enabled", function() {
+      view = mountTestComponent({
+        mediaConnected: true,
+        remoteVideoEnabled: false
+      });
+
+      TestUtils.findRenderedComponentWithType(view, sharedViews.AvatarView);
+    });
+
+    it("should display the remote video when the stream is enabled", function() {
+      conversationStore.setStoreState({
+        remoteSrcVideoObject: { fake: 1 }
+      });
+
+      view = mountTestComponent({
+        mediaConnected: true,
+        remoteVideoEnabled: true
+      });
+
+      expect(view.getDOMNode().querySelector(".remote video")).not.eql(null);
+    });
+
+    it("should display an avatar for local video when the stream is not enabled", function() {
+      view = mountTestComponent({
+        video: {
+          enabled: false
+        }
+      });
+
+      TestUtils.findRenderedComponentWithType(view, sharedViews.AvatarView);
+    });
+
+    it("should display the local video when the stream is enabled", function() {
+      conversationStore.setStoreState({
+        localSrcVideoObject: { fake: 1 }
+      });
+
+      view = mountTestComponent({
+        video: {
+          enabled: true
+        }
+      });
+
+      expect(view.getDOMNode().querySelector(".local video")).not.eql(null);
+    });
+
     it("should dispatch a hangupCall action when the hangup button is pressed",
       function() {
-        view = mountTestComponent({
-          dispatcher: dispatcher
-        });
+        view = mountTestComponent();
 
         var hangupBtn = view.getDOMNode().querySelector(".btn-hangup");
 
         React.addons.TestUtils.Simulate.click(hangupBtn);
 
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("name", "hangupCall"));
       });
 
     it("should dispatch a setMute action when the audio mute button is pressed",
       function() {
         view = mountTestComponent({
-          dispatcher: dispatcher,
           audio: {enabled: false}
         });
 
         var muteBtn = view.getDOMNode().querySelector(".btn-mute-audio");
 
         React.addons.TestUtils.Simulate.click(muteBtn);
 
         sinon.assert.calledWithMatch(dispatcher.dispatch,
@@ -524,17 +572,16 @@ describe("loop.conversationViews", funct
           sinon.match.hasOwn("enabled", true));
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("type", "audio"));
       });
 
     it("should dispatch a setMute action when the video mute button is pressed",
       function() {
         view = mountTestComponent({
-          dispatcher: dispatcher,
           video: {enabled: true}
         });
 
         var muteBtn = view.getDOMNode().querySelector(".btn-mute-video");
 
         React.addons.TestUtils.Simulate.click(muteBtn);
 
         sinon.assert.calledWithMatch(dispatcher.dispatch,
@@ -542,191 +589,180 @@ describe("loop.conversationViews", funct
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("enabled", false));
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           sinon.match.hasOwn("type", "video"));
       });
 
     it("should set the mute button as mute off", function() {
       view = mountTestComponent({
-        dispatcher: dispatcher,
         video: {enabled: true}
       });
 
       var muteBtn = view.getDOMNode().querySelector(".btn-mute-video");
 
       expect(muteBtn.classList.contains("muted")).eql(false);
     });
 
     it("should set the mute button as mute on", function() {
       view = mountTestComponent({
-        dispatcher: dispatcher,
         audio: {enabled: false}
       });
 
       var muteBtn = view.getDOMNode().querySelector(".btn-mute-audio");
 
       expect(muteBtn.classList.contains("muted")).eql(true);
     });
   });
 
   describe("CallControllerView", function() {
-    var store, feedbackStore;
+    var feedbackStore;
 
     function mountTestComponent() {
       return TestUtils.renderIntoDocument(
         React.createElement(loop.conversationViews.CallControllerView, {
           dispatcher: dispatcher,
           mozLoop: fakeMozLoop
         }));
     }
 
     beforeEach(function() {
-      store = new loop.store.ConversationStore(dispatcher, {
-        client: {},
-        mozLoop: fakeMozLoop,
-        sdkDriver: {}
-      });
-      loop.store.StoreMixin.register({
-        conversationStore: store
-      });
-
       feedbackStore = new loop.store.FeedbackStore(dispatcher, {
         feedbackClient: {}
       });
     });
 
     it("should set the document title to the callerId", function() {
-      store.setStoreState({
+      conversationStore.setStoreState({
         contact: contact
       });
 
       mountTestComponent();
 
       expect(fakeWindow.document.title).eql("mrsmith");
     });
 
     it("should fallback to the contact email if the contact name is not defined", function() {
       delete contact.name;
-      store.setStoreState({
+      conversationStore.setStoreState({
         contact: contact
       });
 
       mountTestComponent({contact: contact});
 
       expect(fakeWindow.document.title).eql("fakeEmail");
     });
 
     it("should fallback to the caller id if no contact is defined", function() {
-      store.setStoreState({
+      conversationStore.setStoreState({
         callerId: "fakeId"
       });
 
       mountTestComponent({contact: contact});
 
       expect(fakeWindow.document.title).eql("fakeId");
     });
 
     it("should render the CallFailedView when the call state is 'terminated'",
       function() {
-        store.setStoreState({
+        conversationStore.setStoreState({
           callState: CALL_STATES.TERMINATED,
           contact: contact
         });
 
         view = mountTestComponent();
 
         TestUtils.findRenderedComponentWithType(view,
           loop.conversationViews.CallFailedView);
     });
 
     it("should render the PendingConversationView for outgoing calls when the call state is 'gather'",
       function() {
-        store.setStoreState({
+        conversationStore.setStoreState({
           callState: CALL_STATES.GATHER,
           contact: contact,
           outgoing: true
         });
 
         view = mountTestComponent();
 
         TestUtils.findRenderedComponentWithType(view,
           loop.conversationViews.PendingConversationView);
     });
 
     it("should render the AcceptCallView for incoming calls when the call state is 'alerting'", function() {
-      store.setStoreState({
+      conversationStore.setStoreState({
         callState: CALL_STATES.ALERTING,
         outgoing: false
       });
 
       view = mountTestComponent();
 
       TestUtils.findRenderedComponentWithType(view,
         loop.conversationViews.AcceptCallView);
     });
 
     it("should render the OngoingConversationView when the call state is 'ongoing'",
       function() {
-        store.setStoreState({callState: CALL_STATES.ONGOING});
+        conversationStore.setStoreState({callState: CALL_STATES.ONGOING});
 
         view = mountTestComponent();
 
         TestUtils.findRenderedComponentWithType(view,
           loop.conversationViews.OngoingConversationView);
     });
 
     it("should render the FeedbackView when the call state is 'finished'",
       function() {
-        store.setStoreState({callState: CALL_STATES.FINISHED});
+        conversationStore.setStoreState({callState: CALL_STATES.FINISHED});
 
         view = mountTestComponent();
 
         TestUtils.findRenderedComponentWithType(view,
           loop.shared.views.FeedbackView);
     });
 
     it("should set the document title to conversation_has_ended when displaying the feedback view", function() {
-      store.setStoreState({callState: CALL_STATES.FINISHED});
+      conversationStore.setStoreState({callState: CALL_STATES.FINISHED});
 
       mountTestComponent();
 
       expect(fakeWindow.document.title).eql("conversation_has_ended");
     });
 
     it("should play the terminated sound when the call state is 'finished'",
       function() {
         var fakeAudio = {
           play: sinon.spy(),
           pause: sinon.spy(),
           removeAttribute: sinon.spy()
         };
         sandbox.stub(window, "Audio").returns(fakeAudio);
 
-        store.setStoreState({callState: CALL_STATES.FINISHED});
+        conversationStore.setStoreState({callState: CALL_STATES.FINISHED});
 
         view = mountTestComponent();
 
         sinon.assert.calledOnce(fakeAudio.play);
     });
 
     it("should update the rendered views when the state is changed.",
       function() {
-        store.setStoreState({
+        conversationStore.setStoreState({
           callState: CALL_STATES.GATHER,
           contact: contact,
           outgoing: true
         });
 
         view = mountTestComponent();
 
         TestUtils.findRenderedComponentWithType(view,
           loop.conversationViews.PendingConversationView);
 
-        store.setStoreState({callState: CALL_STATES.TERMINATED});
+        conversationStore.setStoreState({callState: CALL_STATES.TERMINATED});
 
         TestUtils.findRenderedComponentWithType(view,
           loop.conversationViews.CallFailedView);
     });
   });
 
   describe("AcceptCallView", function() {
     var view;

--- a/browser/components/loop/test/desktop-local/roomViews_test.js
+++ b/browser/components/loop/test/desktop-local/roomViews_test.js
@@ -3,16 +3,17 @@
 
 describe("loop.roomViews", function () {
   "use strict";
 
   var expect = chai.expect;
   var TestUtils = React.addons.TestUtils;
   var sharedActions = loop.shared.actions;
   var sharedUtils = loop.shared.utils;
+  var sharedViews = loop.shared.views;
   var ROOM_STATES = loop.store.ROOM_STATES;
   var SCREEN_SHARE_STATES = loop.shared.utils.SCREEN_SHARE_STATES;
 
   var sandbox, dispatcher, roomStore, activeRoomStore, fakeWindow,
     fakeMozLoop, fakeContextURL;
   var favicon = "data:image/x-icon;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==";
 
   beforeEach(function() {
@@ -62,16 +63,23 @@ describe("loop.roomViews", function () {
     activeRoomStore = new loop.store.ActiveRoomStore(dispatcher, {
       mozLoop: {},
       sdkDriver: {}
     });
     roomStore = new loop.store.RoomStore(dispatcher, {
       mozLoop: fakeMozLoop,
       activeRoomStore: activeRoomStore
     });
+    var textChatStore = new loop.store.TextChatStore(dispatcher, {
+      sdkDriver: {}
+    });
+
+    loop.store.StoreMixin.register({
+      textChatStore: textChatStore
+    });
 
     fakeContextURL = {
       description: "An invalid page",
       location: "http://invalid.com",
       thumbnail: "data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw=="
     };
   });
 
@@ -417,26 +425,16 @@ describe("loop.roomViews", function () {
       sinon.assert.calledOnce(fakeWindow.close);
     });
 
     describe("#componentWillUpdate", function() {
       function expectActionDispatched(view) {
         sinon.assert.calledOnce(dispatcher.dispatch);
         sinon.assert.calledWithExactly(dispatcher.dispatch,
           sinon.match.instanceOf(sharedActions.SetupStreamElements));
-        sinon.assert.calledWithExactly(dispatcher.dispatch,
-          sinon.match(function(value) {
-            return value.getLocalElementFunc() ===
-                   view.getDOMNode().querySelector(".local");
-          }));
-        sinon.assert.calledWithExactly(dispatcher.dispatch,
-          sinon.match(function(value) {
-            return value.getRemoteElementFunc() ===
-                   view.getDOMNode().querySelector(".remote");
-          }));
       }
 
       it("should dispatch a `SetupStreamElements` action when the MEDIA_WAIT state " +
         "is entered", function() {
           activeRoomStore.setStoreState({roomState: ROOM_STATES.READY});
           var view = mountTestComponent();
 
           activeRoomStore.setStoreState({roomState: ROOM_STATES.MEDIA_WAIT});
@@ -511,16 +509,64 @@ describe("loop.roomViews", function () {
             used: true
           });
 
           view = mountTestComponent();
 
           TestUtils.findRenderedComponentWithType(view,
             loop.shared.views.FeedbackView);
         });
+
+      it("should display an avatar for remote video when the room has participants but video is not enabled",
+        function() {
+          activeRoomStore.setStoreState({
+            roomState: ROOM_STATES.HAS_PARTICIPANTS,
+            mediaConnected: true,
+            remoteVideoEnabled: false
+          });
+
+          view = mountTestComponent();
+
+          TestUtils.findRenderedComponentWithType(view, sharedViews.AvatarView);
+        });
+
+      it("should display the remote video when there are participants and video is enabled", function() {
+        activeRoomStore.setStoreState({
+          roomState: ROOM_STATES.HAS_PARTICIPANTS,
+          mediaConnected: true,
+          remoteVideoEnabled: true,
+          remoteSrcVideoObject: { fake: 1 }
+        });
+
+        view = mountTestComponent();
+
+        expect(view.getDOMNode().querySelector(".remote video")).not.eql(null);
+      });
+
+      it("should display an avatar for local video when the stream is muted", function() {
+        activeRoomStore.setStoreState({
+          videoMuted: true
+        });
+
+        view = mountTestComponent();
+
+        TestUtils.findRenderedComponentWithType(view, sharedViews.AvatarView);
+      });
+
+      it("should display the local video when the stream is enabled", function() {
+        activeRoomStore.setStoreState({
+          localSrcVideoObject: { fake: 1 },
+          videoMuted: false
+        });
+
+        view = mountTestComponent();
+
+        expect(view.getDOMNode().querySelector(".local video")).not.eql(null);
+      });
+
     });
 
     describe("Mute", function() {
       it("should render local media as audio-only if video is muted",
         function() {
           activeRoomStore.setStoreState({
             roomState: ROOM_STATES.SESSION_CONNECTED,
             videoMuted: true

--- a/browser/components/loop/test/functional/test_1_browser_call.py
+++ b/browser/components/loop/test/functional/test_1_browser_call.py
@@ -97,17 +97,17 @@ class Test1BrowserCall(MarionetteTestCas
 
     def local_check_room_self_video(self):
         self.switch_to_chatbox()
 
         # expect a video container on desktop side
         media_container = self.wait_for_element_displayed(By.CLASS_NAME, "media")
         self.assertEqual(media_container.tag_name, "div", "expect a video container")
 
-        self.check_video(".local .OT_publisher .OT_widget-container");
+        self.check_video(".local-video")
 
     def local_get_and_verify_room_url(self):
         self.switch_to_chatbox()
         button = self.wait_for_element_displayed(By.CLASS_NAME, "btn-copy")
 
         button.click()
 
         # click the element
@@ -122,43 +122,40 @@ class Test1BrowserCall(MarionetteTestCas
         self.switch_to_standalone()
         self.marionette.navigate(url)
 
         # Join the room
         join_button = self.wait_for_element_displayed(By.CLASS_NAME,
                                                       "btn-join")
         join_button.click()
 
-    # Assumes the standlone or the conversation window is selected first.
+    # Assumes the standalone or the conversation window is selected first.
     def check_video(self, selector):
-        video_wrapper = self.wait_for_element_displayed(By.CSS_SELECTOR,
+        video = self.wait_for_element_displayed(By.CSS_SELECTOR,
                                                         selector, 20)
-        video = self.wait_for_subelement_displayed(video_wrapper,
-                                                   By.TAG_NAME, "video")
-
         self.wait_for_element_attribute_to_be_false(video, "paused")
         self.assertEqual(video.get_attribute("ended"), "false")
 
     def standalone_check_remote_video(self):
         self.switch_to_standalone()
-        self.check_video(".remote .OT_subscriber .OT_widget-container")
+        self.check_video(".remote-video")
 
     def local_check_remote_video(self):
         self.switch_to_chatbox()
-        self.check_video(".remote .OT_subscriber .OT_widget-container")
+        self.check_video(".remote-video")
 
     def local_enable_screenshare(self):
         self.switch_to_chatbox()
         button = self.marionette.find_element(By.CLASS_NAME, "btn-screen-share")
 
         button.click()
 
     def standalone_check_remote_screenshare(self):
         self.switch_to_standalone()
-        self.check_video(".media .screen .OT_subscriber .OT_widget-container")
+        self.check_video(".screen-share-video")
 
     def remote_leave_room_and_verify_feedback(self):
         self.switch_to_standalone()
         button = self.marionette.find_element(By.CLASS_NAME, "btn-hangup")
 
         button.click()
 
         # check that the feedback form is displayed

--- a/browser/components/loop/test/shared/activeRoomStore_test.js
+++ b/browser/components/loop/test/shared/activeRoomStore_test.js
@@ -966,16 +966,71 @@ describe("loop.store.ActiveRoomStore", f
         type: "video",
         enabled: false
       }));
 
       expect(store.getStoreState().videoMuted).eql(true);
     });
   });
 
+  describe("#localVideoEnabled", function() {
+    it("should add a localSrcVideoObject to the store", function() {
+      var fakeVideoElement = {name: "fakeVideoElement"};
+      expect(store.getStoreState()).to.not.have.property("localSrcVideoObject");
+
+      store.localVideoEnabled({srcVideoObject: fakeVideoElement});
+
+      expect(store.getStoreState()).to.have.property("localSrcVideoObject",
+        fakeVideoElement);
+    });
+  });
+
+  describe("#remoteVideoEnabled", function() {
+    var fakeVideoElement;
+
+    beforeEach(function() {
+      fakeVideoElement = {name: "fakeVideoElement"};
+    });
+
+    it("should add a remoteSrcVideoObject to the store", function() {
+      expect(store.getStoreState()).to.not.have.property("remoteSrcVideoObject");
+
+      store.remoteVideoEnabled({srcVideoObject: fakeVideoElement});
+
+      expect(store.getStoreState()).to.have.property("remoteSrcVideoObject",
+        fakeVideoElement);
+    });
+
+    it("should set remoteVideoEnabled", function() {
+      store.remoteVideoEnabled({srcVideoObject: fakeVideoElement});
+
+      expect(store.getStoreState().remoteVideoEnabled).eql(true);
+    });
+  });
+
+  describe("#remoteVideoDisabled", function() {
+    it("should set remoteVideoEnabled to false", function() {
+      store.setStoreState({
+        remoteVideoEnabled: true
+      });
+
+      store.remoteVideoDisabled();
+
+      expect(store.getStoreState().remoteVideoEnabled).eql(false);
+    });
+  });
+
+  describe("#mediaConnected", function() {
+    it("should set mediaConnected to true", function() {
+      store.mediaConnected();
+
+      expect(store.getStoreState().mediaConnected).eql(true);
+    });
+  });
+
   describe("#screenSharingState", function() {
     beforeEach(function() {
       store.setStoreState({windowId: "1234"});
     });
 
     it("should save the state", function() {
       store.screenSharingState(new sharedActions.ScreenSharingState({
         state: SCREEN_SHARE_STATES.ACTIVE
@@ -1007,16 +1062,44 @@ describe("loop.store.ActiveRoomStore", f
     it("should save the state", function() {
       store.receivingScreenShare(new sharedActions.ReceivingScreenShare({
         receiving: true
       }));
 
       expect(store.getStoreState().receivingScreenShare).eql(true);
     });
 
+    it("should add a screenShareVideoObject to the store when sharing is active", function() {
+      var fakeVideoElement = {name: "fakeVideoElement"};
+      expect(store.getStoreState()).to.not.have.property("screenShareVideoObject");
+
+      store.receivingScreenShare(new sharedActions.ReceivingScreenShare({
+        receiving: true,
+        srcVideoObject: fakeVideoElement
+      }));
+
+      expect(store.getStoreState()).to.have.property("screenShareVideoObject",
+        fakeVideoElement);
+    });
+
+    it("should clear the screenShareVideoObject from the store when sharing is inactive", function() {
+      store.setStoreState({
+        screenShareVideoObject: {
+          name: "fakeVideoElement"
+        }
+      });
+
+      store.receivingScreenShare(new sharedActions.ReceivingScreenShare({
+        receiving: false,
+        srcVideoObject: null
+      }));
+
+      expect(store.getStoreState().screenShareVideoObject).eql(null);
+    });
+
     it("should delete the screen remote video dimensions if screen sharing is not active", function() {
       store.setStoreState({
         remoteVideoDimensions: {
           screen: {fake: 10},
           camera: {fake: 20}
         }
       });
 
@@ -1157,16 +1240,26 @@ describe("loop.store.ActiveRoomStore", f
   });
 
   describe("#remotePeerDisconnected", function() {
     it("should set the state to `SESSION_CONNECTED`", function() {
       store.remotePeerDisconnected();
 
       expect(store.getStoreState().roomState).eql(ROOM_STATES.SESSION_CONNECTED);
     });
+
+    it("should clear the remoteSrcVideoObject", function() {
+      store.setStoreState({
+        remoteSrcVideoObject: { name: "fakeVideoElement" }
+      });
+
+      store.remotePeerDisconnected();
+
+      expect(store.getStoreState().remoteSrcVideoObject).eql(null);
+    });
   });
 
   describe("#connectionStatus", function() {
     it("should call rooms.sendConnectionStatus on mozLoop", function() {
       store.setStoreState({
         roomToken: "fakeToken",
         sessionToken: "9876543210"
       });

--- a/browser/components/loop/test/shared/conversationStore_test.js
+++ b/browser/components/loop/test/shared/conversationStore_test.js
@@ -8,17 +8,17 @@ describe("loop.store.ConversationStore",
   var CALL_STATES = loop.store.CALL_STATES;
   var WS_STATES = loop.store.WS_STATES;
   var CALL_TYPES = loop.shared.utils.CALL_TYPES;
   var WEBSOCKET_REASONS = loop.shared.utils.WEBSOCKET_REASONS;
   var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
   var sharedActions = loop.shared.actions;
   var sharedUtils = loop.shared.utils;
   var sandbox, dispatcher, client, store, fakeSessionData, sdkDriver;
-  var contact, fakeMozLoop;
+  var contact, fakeMozLoop, fakeVideoElement;
   var connectPromise, resolveConnectPromise, rejectConnectPromise;
   var wsCancelSpy, wsCloseSpy, wsDeclineSpy, wsMediaUpSpy, fakeWebsocket;
 
   function checkFailures(done, f) {
     try {
       f();
       done();
     } catch (err) {
@@ -84,16 +84,18 @@ describe("loop.store.ConversationStore",
       callId: "142536",
       sessionId: "321456",
       sessionToken: "341256",
       websocketToken: "543216",
       windowId: "28",
       progressURL: "fakeURL"
     };
 
+    fakeVideoElement = { id: "fakeVideoElement" };
+
     var dummySocket = {
       close: sinon.spy(),
       send: sinon.spy()
     };
 
     connectPromise = new Promise(function(resolve, reject) {
       resolveConnectPromise = resolve;
       rejectConnectPromise = reject;
@@ -922,16 +924,72 @@ describe("loop.store.ConversationStore",
   describe("#mediaConnected", function() {
     it("should send mediaUp via the websocket", function() {
       store._websocket = fakeWebsocket;
 
       store.mediaConnected(new sharedActions.MediaConnected());
 
       sinon.assert.calledOnce(wsMediaUpSpy);
     });
+
+    it("should set store.mediaConnected to true", function () {
+      store._websocket = fakeWebsocket;
+
+      store.mediaConnected(new sharedActions.MediaConnected());
+
+      expect(store.getStoreState("mediaConnected")).eql(true);
+    });
+  });
+
+  describe("#localVideoEnabled", function() {
+    it("should set store.localSrcVideoObject from the action data", function () {
+      store.localVideoEnabled(
+        new sharedActions.LocalVideoEnabled({srcVideoObject: fakeVideoElement}));
+
+      expect(store.getStoreState("localSrcVideoObject")).eql(fakeVideoElement);
+    });
+  });
+
+  describe("#remoteVideoEnabled", function() {
+    it("should set store.remoteSrcVideoObject from the actionData", function () {
+      store.setStoreState({remoteSrcVideoObject: undefined});
+
+      store.remoteVideoEnabled(
+        new sharedActions.RemoteVideoEnabled({srcVideoObject: fakeVideoElement}));
+
+      expect(store.getStoreState("remoteSrcVideoObject")).eql(fakeVideoElement);
+    });
+
+    it("should set store.remoteVideoEnabled to true", function () {
+      store.setStoreState({remoteVideoEnabled: false});
+
+      store.remoteVideoEnabled(
+        new sharedActions.RemoteVideoEnabled({srcVideoObject: fakeVideoElement}));
+
+      expect(store.getStoreState("remoteVideoEnabled")).to.be.true;
+    });
+  });
+
+  describe("#remoteVideoDisabled", function() {
+    it("should set store.remoteVideoEnabled to false", function () {
+      store.setStoreState({remoteVideoEnabled: true});
+
+      store.remoteVideoDisabled(new sharedActions.RemoteVideoDisabled({}));
+
+      expect(store.getStoreState("remoteVideoEnabled")).to.be.false;
+    });
+
+    it("should set store.remoteSrcVideoObject to undefined", function () {
+      store.setStoreState({remoteSrcVideoObject: fakeVideoElement});
+
+      store.remoteVideoDisabled(new sharedActions.RemoteVideoDisabled({}));
+
+      expect(store.getStoreState("remoteSrcVideoObject")).to.be.undefined;
+    });
+
   });
 
   describe("#setMute", function() {
     it("should save the mute state for the audio stream", function() {
       store.setStoreState({"audioMuted": false});
 
       dispatcher.dispatch(new sharedActions.SetMute({
         type: "audio",

--- a/browser/components/loop/test/shared/mixins_test.js
+++ b/browser/components/loop/test/shared/mixins_test.js
@@ -363,98 +363,16 @@ describe("loop.shared.mixins", function(
           expect(result.streamHeight).eql(360);
           expect(result.offsetX).eql(0);
           // The remote element width (640) minus the stream width (360) split in 2.
           expect(result.offsetY).eql(140);
         });
     });
 
     describe("Events", function() {
-      describe("resize", function() {
-        it("should update the width on the local stream element", function() {
-          localElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { width: "0%" }
-          };
-
-          rootObject.events.resize();
-          sandbox.clock.tick(10);
-
-          expect(localElement.style.width).eql("100%");
-        });
-
-        it("should update the height on the remote stream element", function() {
-          remoteElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { height: "0%" }
-          };
-
-          rootObject.events.resize();
-          sandbox.clock.tick(10);
-
-          expect(remoteElement.style.height).eql("100%");
-        });
-
-        it("should update the height on the screen share stream element", function() {
-          screenShareElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { height: "0%" }
-          };
-
-          rootObject.events.resize();
-          sandbox.clock.tick(10);
-
-          expect(screenShareElement.style.height).eql("100%");
-        });
-      });
-
-      describe("orientationchange", function() {
-        it("should update the width on the local stream element", function() {
-          localElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { width: "0%" }
-          };
-
-          rootObject.events.orientationchange();
-          sandbox.clock.tick(10);
-
-          expect(localElement.style.width).eql("100%");
-        });
-
-        it("should update the height on the remote stream element", function() {
-          remoteElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { height: "0%" }
-          };
-
-          rootObject.events.orientationchange();
-          sandbox.clock.tick(10);
-
-          expect(remoteElement.style.height).eql("100%");
-        });
-
-        it("should update the height on the screen share stream element", function() {
-          screenShareElement = {
-            offsetWidth: 100,
-            offsetHeight: 100,
-            style: { height: "0%" }
-          };
-
-          rootObject.events.orientationchange();
-          sandbox.clock.tick(10);
-
-          expect(screenShareElement.style.height).eql("100%");
-        });
-      });
-
 
       describe("Video stream dimensions", function() {
         var localVideoDimensions = {
           camera: {
             width: 640,
             height: 480
           }
         };

--- a/browser/components/loop/test/shared/otSdkDriver_test.js
+++ b/browser/components/loop/test/shared/otSdkDriver_test.js
@@ -8,25 +8,21 @@ describe("loop.OTSdkDriver", function ()
   var sharedActions = loop.shared.actions;
   var FAILURE_DETAILS = loop.shared.utils.FAILURE_DETAILS;
   var STREAM_PROPERTIES = loop.shared.utils.STREAM_PROPERTIES;
   var SCREEN_SHARE_STATES = loop.shared.utils.SCREEN_SHARE_STATES;
   var CHAT_CONTENT_TYPES = loop.store.CHAT_CONTENT_TYPES;
 
   var sandbox;
   var dispatcher, driver, mozLoop, publisher, sdk, session, sessionData, subscriber;
-  var fakeLocalElement, fakeRemoteElement, fakeScreenElement;
   var publisherConfig, fakeEvent;
 
   beforeEach(function() {
     sandbox = sinon.sandbox.create();
 
-    fakeLocalElement = { fake: 1 };
-    fakeRemoteElement = { fake: 2 };
-    fakeScreenElement = { fake: 3 };
     fakeEvent = {
       preventDefault: sinon.stub()
     };
     publisherConfig = {
       fake: "config"
     };
     sessionData = {
       apiKey: "1234567890",
@@ -115,39 +111,37 @@ describe("loop.OTSdkDriver", function ()
         new loop.OTSdkDriver({dispatcher: dispatcher});
       }).to.Throw(/sdk/);
     });
   });
 
   describe("#setupStreamElements", function() {
     it("should call initPublisher", function() {
       driver.setupStreamElements(new sharedActions.SetupStreamElements({
-        getLocalElementFunc: function() { return fakeLocalElement; },
-        getRemoteElementFunc: function() { return fakeRemoteElement; },
         publisherConfig: publisherConfig
       }));
 
       var expectedConfig = _.extend({
         channels: {
           text: {}
         }
       }, publisherConfig);
 
       sinon.assert.calledOnce(sdk.initPublisher);
-      sinon.assert.calledWith(sdk.initPublisher, fakeLocalElement, expectedConfig);
+      sinon.assert.calledWith(sdk.initPublisher,
+        sinon.match.instanceOf(HTMLDivElement),
+        expectedConfig);
     });
   });
 
   describe("#retryPublishWithoutVideo", function() {
     beforeEach(function() {
       sdk.initPublisher.returns(publisher);
 
       driver.setupStreamElements(new sharedActions.SetupStreamElements({
-        getLocalElementFunc: function() { return fakeLocalElement; },
-        getRemoteElementFunc: function() { return fakeRemoteElement; },
         publisherConfig: publisherConfig
       }));
     });
 
     it("should make MediaStreamTrack.getSources return without a video source", function(done) {
       driver.retryPublishWithoutVideo();
 
       window.MediaStreamTrack.getSources(function(sources) {
@@ -164,27 +158,27 @@ describe("loop.OTSdkDriver", function ()
 
       var expectedConfig = _.extend({
         channels: {
           text: {}
         }
       }, publisherConfig);
 
       sinon.assert.calledTwice(sdk.initPublisher);
-      sinon.assert.calledWith(sdk.initPublisher, fakeLocalElement, expectedConfig);
+      sinon.assert.calledWith(sdk.initPublisher,
+        sinon.match.instanceOf(HTMLDivElement),
+        expectedConfig);
     });
   });
 
   describe("#setMute", function() {
     beforeEach(function() {
       sdk.initPublisher.returns(publisher);
 
       driver.setupStreamElements(new sharedActions.SetupStreamElements({
-        getLocalElementFunc: function() { return fakeLocalElement; },
-        getRemoteElementFunc: function() { return fakeRemoteElement; },
         publisherConfig: publisherConfig
       }));
     });
 
     it("should publishAudio with the correct enabled value", function() {
       driver.setMute(new sharedActions.SetMute({
         type: "audio",
         enabled: false
@@ -201,44 +195,35 @@ describe("loop.OTSdkDriver", function ()
       }));
 
       sinon.assert.calledOnce(publisher.publishVideo);
       sinon.assert.calledWithExactly(publisher.publishVideo, true);
     });
   });
 
   describe("#startScreenShare", function() {
-    var fakeElement;
-
     beforeEach(function() {
       sandbox.stub(driver, "_noteSharingState");
-
-      fakeElement = {
-        className: "fakeVideo"
-      };
-
-      driver.getScreenShareElementFunc = function() {
-        return fakeElement;
-      };
     });
 
     it("should initialize a publisher", function() {
       // We're testing with `videoSource` set to 'browser', not 'window', as it
       // has multiple options.
       var options = {
         videoSource: "browser",
         constraints: {
           browserWindow: 42,
           scrollWithPage: true
         }
       };
       driver.startScreenShare(options);
 
       sinon.assert.calledOnce(sdk.initPublisher);
-      sinon.assert.calledWithMatch(sdk.initPublisher, fakeElement, options);
+      sinon.assert.calledWithMatch(sdk.initPublisher,
+        sinon.match.instanceOf(HTMLDivElement), options);
     });
 
     it("should log a telemetry action", function() {
       var options = {
         videoSource: "browser",
         constraints: {
           browserWindow: 42,
           scrollWithPage: true
@@ -254,20 +239,16 @@ describe("loop.OTSdkDriver", function ()
     beforeEach(function() {
       var options = {
         videoSource: "browser",
         constraints: {
           browserWindow: 42,
           scrollWithPage: true
         }
       };
-      driver.getScreenShareElementFunc = function() {
-        return fakeScreenElement;
-      };
-
       driver.startScreenShare(options);
     });
 
     it("should switch to the acquired window", function() {
       driver.switchAcquiredWindow(72);
 
       sinon.assert.calledOnce(publisher._.switchAcquiredWindow);
       sinon.assert.calledWithExactly(publisher._.switchAcquiredWindow, 72);
@@ -277,18 +258,16 @@ describe("loop.OTSdkDriver", function ()
       driver.switchAcquiredWindow(42);
 
       sinon.assert.notCalled(publisher._.switchAcquiredWindow);
     });
   });
 
   describe("#endScreenShare", function() {
     beforeEach(function() {
-      driver.getScreenShareElementFunc = function() {};
-
       sandbox.stub(driver, "_noteSharingState");
     });
 
     it("should unpublish the share", function() {
       driver.startScreenShare({
         videoSource: "window"
       });
       driver.session = session;
@@ -633,24 +612,44 @@ describe("loop.OTSdkDriver", function ()
 
         sinon.assert.calledOnce(driver._publisherChannel.send);
         sinon.assert.calledWithExactly(driver._publisherChannel.send,
           JSON.stringify(message));
       });
     });
   });
 
-  describe("Events (general media)", function() {
+  describe("Events: general media", function() {
+    var fakeConnection, fakeStream, fakeSubscriberObject,
+      fakeSdkContainerWithVideo, videoElement;
+
     beforeEach(function() {
+      fakeConnection = "fakeConnection";
+      fakeStream = {
+        hasVideo: true,
+        videoType: "camera",
+        videoDimensions: {width: 1, height: 2}
+      };
+
+      fakeSubscriberObject = _.extend({
+        session: { connection: fakeConnection },
+        stream: fakeStream
+      }, Backbone.Events);
+
+      fakeSdkContainerWithVideo = {
+        querySelector: sinon.stub().returns(videoElement)
+      };
+
+      // use a real video element so that these tests correctly reflect
+      // test behavior when run in firefox or chrome
+      videoElement = document.createElement("video");
+
       driver.connectSession(sessionData);
 
       driver.setupStreamElements(new sharedActions.SetupStreamElements({
-        getLocalElementFunc: function() {return fakeLocalElement; },
-        getScreenShareElementFunc: function() {return fakeScreenElement; },
-        getRemoteElementFunc: function() {return fakeRemoteElement; },
         publisherConfig: publisherConfig
       }));
     });
 
     describe("connectionDestroyed", function() {
       it("should dispatch a remotePeerDisconnected action if the client" +
         "disconnected", function() {
           session.trigger("connectionDestroyed", {
@@ -755,19 +754,23 @@ describe("loop.OTSdkDriver", function ()
 
         sinon.assert.calledWith(driver._noteConnectionLengthIfNeeded, startTime,
           endTime);
       });
 
     });
 
     describe("streamCreated (publisher/local)", function() {
-      var fakeStream;
+      var fakeStream, fakeMockVideo;
 
       beforeEach(function() {
+        driver._mockPublisherEl = document.createElement("div");
+        fakeMockVideo = document.createElement("video");
+
+        driver._mockPublisherEl.appendChild(fakeMockVideo);
         fakeStream = {
           hasVideo: true,
           videoType: "camera",
           videoDimensions: {width: 1, height: 2}
         };
       });
 
       it("should dispatch a VideoDimensionsChanged action", function() {
@@ -777,16 +780,26 @@ describe("loop.OTSdkDriver", function ()
         sinon.assert.calledWithExactly(dispatcher.dispatch,
           new sharedActions.VideoDimensionsChanged({
             isLocal: true,
             videoType: "camera",
             dimensions: {width: 1, height: 2}
           }));
       });
 
+      it("should dispatch a LocalVideoEnabled action", function() {
+        publisher.trigger("streamCreated", { stream: fakeStream });
+
+        sinon.assert.called(dispatcher.dispatch);
+        sinon.assert.calledWithExactly(dispatcher.dispatch,
+          new sharedActions.LocalVideoEnabled({
+            srcVideoObject: fakeMockVideo
+          }));
+      });
+
       it("should dispatch a ConnectionStatus action", function() {
         driver._metrics.recvStreams = 1;
         driver._metrics.connections = 2;
 
         publisher.trigger("streamCreated", {stream: fakeStream});
 
         sinon.assert.called(dispatcher.dispatch);
         sinon.assert.calledWithExactly(dispatcher.dispatch,
@@ -795,26 +808,17 @@ describe("loop.OTSdkDriver", function ()
             state: "sendrecv",
             connections: 2,
             recvStreams: 1,
             sendStreams: 1
           }));
       });
     });
 
-    describe("streamCreated (session/remote)", function() {
-      var fakeStream;
-
-      beforeEach(function() {
-        fakeStream = {
-          hasVideo: true,
-          videoType: "camera",
-          videoDimensions: {width: 1, height: 2}
-        };
-      });
+    describe("streamCreated: session/remote", function() {
 
       it("should dispatch a VideoDimensionsChanged action", function() {
         session.trigger("streamCreated", { stream: fakeStream });
 
         sinon.assert.called(dispatcher.dispatch);
         sinon.assert.calledWithExactly(dispatcher.dispatch,
           new sharedActions.VideoDimensionsChanged({
             isLocal: false,
@@ -838,79 +842,121 @@ describe("loop.OTSdkDriver", function ()
             sendStreams: 0
           }));
       });
 
       it("should subscribe to a camera stream", function() {
         session.trigger("streamCreated", { stream: fakeStream });
 
         sinon.assert.calledOnce(session.subscribe);
-        sinon.assert.calledWith(session.subscribe,
-          fakeStream, fakeRemoteElement, publisherConfig);
+        sinon.assert.calledWithExactly(session.subscribe,
+          fakeStream, sinon.match.instanceOf(HTMLDivElement), publisherConfig,
+          sinon.match.func);
+      });
+
+      it("should dispatch RemoteVideoEnabled if the stream has video" +
+        " after subscribe is complete", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement).returns(this.fakeSubscriberObject);
+        driver.session = session;
+        fakeStream.connection = fakeConnection;
+        fakeStream.hasVideo = true;
+
+        session.trigger("streamCreated", { stream: fakeStream });
+
+        sinon.assert.called(dispatcher.dispatch);
+        sinon.assert.calledWithExactly(dispatcher.dispatch,
+          new sharedActions.RemoteVideoEnabled({
+            srcVideoObject: videoElement
+          }));
+      });
+
+      it("should not dispatch RemoteVideoEnabled if the stream is audio-only", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement);
+        fakeStream.connection = fakeConnection;
+        fakeStream.hasVideo = false;
+
+        session.trigger("streamCreated", { stream: fakeStream });
+
+        sinon.assert.called(dispatcher.dispatch);
+        sinon.assert.neverCalledWith(dispatcher.dispatch,
+          new sharedActions.RemoteVideoEnabled({
+            srcVideoObject: videoElement
+          }));
       });
 
       it("should trigger a readyForDataChannel signal after subscribe is complete", function() {
-        session.subscribe.callsArgWith(3, null);
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          document.createElement("video"));
         driver._useDataChannels = true;
-        fakeStream.connection = "fakeID";
+        fakeStream.connection = fakeConnection;
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         sinon.assert.calledOnce(session.signal);
         sinon.assert.calledWith(session.signal, {
           type: "readyForDataChannel",
-          to: "fakeID"
+          to: fakeConnection
         });
       });
 
       it("should not trigger readyForDataChannel signal if data channels are not wanted", function() {
-        session.subscribe.callsArgWith(3, null);
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          document.createElement("video"));
         driver._useDataChannels = false;
-        fakeStream.connection = "fakeID";
+        fakeStream.connection = fakeConnection;
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         sinon.assert.notCalled(session.signal);
       });
 
       it("should subscribe to a screen sharing stream", function() {
         fakeStream.videoType = "screen";
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         sinon.assert.calledOnce(session.subscribe);
         sinon.assert.calledWithExactly(session.subscribe,
-          fakeStream, fakeScreenElement, publisherConfig);
+          fakeStream, sinon.match.instanceOf(HTMLDivElement), publisherConfig,
+          sinon.match.func);
       });
 
       it("should dispatch a mediaConnected action if both streams are up", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement);
         driver._publishedLocalStream = true;
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         // Called twice due to the VideoDimensionsChanged above.
         sinon.assert.called(dispatcher.dispatch);
         sinon.assert.calledWithMatch(dispatcher.dispatch,
           new sharedActions.MediaConnected({}));
       });
 
       it("should store the start time when both streams are up and" +
       " driver._sendTwoWayMediaTelemetry is true", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement);
         driver._sendTwoWayMediaTelemetry = true;
         driver._publishedLocalStream = true;
         var startTime = 1;
         sandbox.stub(performance, "now").returns(startTime);
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         expect(driver._getTwoWayMediaStartTime()).to.eql(startTime);
       });
 
       it("should not store the start time when both streams are up and" +
          " driver._isDesktop is false", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement);
         driver._isDesktop = false;
         driver._publishedLocalStream = true;
         var startTime = 73;
         sandbox.stub(performance, "now").returns(startTime);
 
         session.trigger("streamCreated", { stream: fakeStream });
 
         expect(driver._getTwoWayMediaStartTime()).to.not.eql(startTime);
@@ -931,30 +977,32 @@ describe("loop.OTSdkDriver", function ()
       it("should not dispatch a ReceivingScreenShare action for camera streams",
         function() {
           session.trigger("streamCreated", {stream: fakeStream});
 
           sinon.assert.neverCalledWithMatch(dispatcher.dispatch,
             new sharedActions.ReceivingScreenShare({receiving: true}));
         });
 
-      it("should dispatch a ReceivingScreenShare action for screen sharing streams",
-        function() {
+      // XXX See bug 1171933 and the comment in
+      // OtSdkDriver#_handleRemoteScreenShareCreated
+      it.skip("should dispatch a ReceivingScreenShare action for screen" +
+        " sharing streams", function() {
           fakeStream.videoType = "screen";
 
           session.trigger("streamCreated", { stream: fakeStream });
 
           // Called twice due to the VideoDimensionsChanged above.
           sinon.assert.called(dispatcher.dispatch);
           sinon.assert.calledWithExactly(dispatcher.dispatch,
             new sharedActions.ReceivingScreenShare({ receiving: true }));
         });
     });
 
-    describe("streamDestroyed (publisher/local)", function() {
+    describe("streamDestroyed: publisher/local", function() {
       it("should dispatch a ConnectionStatus action", function() {
         driver._metrics.sendStreams = 1;
         driver._metrics.recvStreams = 1;
         driver._metrics.connections = 2;
 
         publisher.trigger("streamDestroyed");
 
         sinon.assert.calledOnce(dispatcher.dispatch);
@@ -964,17 +1012,17 @@ describe("loop.OTSdkDriver", function ()
             state: "receiving",
             connections: 2,
             recvStreams: 1,
             sendStreams: 0
           }));
       });
     });
 
-    describe("streamDestroyed (session/remote)", function() {
+    describe("streamDestroyed: session/remote", function() {
       var fakeStream;
 
       beforeEach(function() {
         fakeStream = {
           videoType: "screen"
         };
       });
 
@@ -1177,16 +1225,46 @@ describe("loop.OTSdkDriver", function ()
     describe("accessDialogOpened", function() {
       it("should prevent the default event behavior", function() {
         publisher.trigger("accessDialogOpened", fakeEvent);
 
         sinon.assert.calledOnce(fakeEvent.preventDefault);
       });
     });
 
+    describe("videoEnabled", function() {
+      it("should dispatch RemoteVideoEnabled", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement).returns(this.fakeSubscriberObject);
+        session.trigger("streamCreated", {stream: fakeSubscriberObject.stream});
+        driver._mockSubscribeEl.appendChild(videoElement);
+
+        fakeSubscriberObject.trigger("videoEnabled");
+
+        sinon.assert.called(dispatcher.dispatch);
+        sinon.assert.calledWith(dispatcher.dispatch,
+          new sharedActions.RemoteVideoEnabled({srcVideoObject: videoElement}));
+      });
+    });
+
+    describe("videoDisabled", function() {
+      it("should dispatch RemoteVideoDisabled", function() {
+        session.subscribe.yieldsOn(driver, null, fakeSubscriberObject,
+          videoElement).returns(this.fakeSubscriberObject);
+        session.trigger("streamCreated", {stream: fakeSubscriberObject.stream});
+
+
+        fakeSubscriberObject.trigger("videoDisabled");
+
+        sinon.assert.called(dispatcher.dispatch);
+        sinon.assert.calledWithExactly(dispatcher.dispatch,
+          new sharedActions.RemoteVideoDisabled({}));
+      });
+    });
+
     describe("signal:readyForDataChannel", function() {
       beforeEach(function() {
         driver.subscriber = subscriber;
         driver._useDataChannels = true;
       });
 
       it("should not do anything if data channels are not wanted", function() {
         driver._useDataChannels = false;
@@ -1265,25 +1343,29 @@ describe("loop.OTSdkDriver", function ()
             new sharedActions.ConnectionFailure({
               reason: FAILURE_DETAILS.UNABLE_TO_PUBLISH_MEDIA
             }));
         });
       });
     });
   });
 
-  describe("Events (screenshare)", function() {
+  describe("Events: screenshare:", function() {
+    var videoElement;
+
     beforeEach(function() {
       driver.connectSession(sessionData);
 
-      driver.getScreenShareElementFunc = function() {};
-
       driver.startScreenShare({
         videoSource: "window"
       });
+
+      // use a real video element so that these tests correctly reflect
+      // code behavior when run in whatever browser
+      videoElement = document.createElement("video");
     });
 
     describe("accessAllowed", function() {
       it("should publish the stream", function() {
         publisher.trigger("accessAllowed", fakeEvent);
 
         sinon.assert.calledOnce(session.publish);
       });