diff --git a/modules/UI/videolayout/LocalVideo.js b/modules/UI/videolayout/LocalVideo.js index 89165c42b1..70c2605e55 100644 --- a/modules/UI/videolayout/LocalVideo.js +++ b/modules/UI/videolayout/LocalVideo.js @@ -276,9 +276,12 @@ export default class LocalVideo extends SmallVideo { // Ensure the video gets play() called on it. This may be necessary in the // case where the local video container was moved and re-attached, in which - // case video does not autoplay. + // case video does not autoplay. Also, set the playsinline attribute on the + // video element so that local video doesn't open in full screen by default + // in Safari browser on iOS. const video = this.container.querySelector('video'); + video && video.setAttribute('playsinline', 'true'); video && !config.testing?.noAutoPlayVideo && video.play(); } } diff --git a/react/features/base/media/components/web/Video.js b/react/features/base/media/components/web/Video.js index 3311a8920b..e4f9cefb1c 100644 --- a/react/features/base/media/components/web/Video.js +++ b/react/features/base/media/components/web/Video.js @@ -32,7 +32,13 @@ type Props = { * Used to determine the value of the autoplay attribute of the underlying * video element. */ - autoPlay: boolean + autoPlay: boolean, + + /** + * Used to determine the value of the autoplay attribute of the underlying + * video element. + */ + playsinline: boolean }; /** @@ -51,7 +57,8 @@ class Video extends Component { static defaultProps = { className: '', autoPlay: true, - id: '' + id: '', + playsinline: true }; /** @@ -140,6 +147,7 @@ class Video extends Component { autoPlay = { this.props.autoPlay } className = { this.props.className } id = { this.props.id } + playsInline = { this.props.playsinline } ref = { this._setVideoElement } /> ); } diff --git a/react/features/device-selection/components/VideoInputPreview.js b/react/features/device-selection/components/VideoInputPreview.js index e8e1154f5a..760eb22a0a 100644 --- a/react/features/device-selection/components/VideoInputPreview.js +++ b/react/features/device-selection/components/VideoInputPreview.js @@ -45,6 +45,7 @@ class VideoInputPreview extends Component {