Added fullscreen to video iframes

microsoft · Sep 13, 2019 · c838dd5 · c838dd5
1 parent 9282174
commit c838dd5
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 4 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -100,6 +100,7 @@ and this project adheres to [Semantic Versioning](http://semver.org/spec/v2.0.0.
 -  Added `timestampFormat` option to the default style options and created `AbsoluteTime` component, by [@tdurnford](https://github.com/tdurnford), in PR [#2295](https://github.com/microsoft/BotFramework-WebChat/pull/2295)
 -  `embed`: Added ES5 polyfills and dev server, by [@compulim](https://github.com/compulim), in PR [#2315](https://github.com/microsoft/BotFramework-WebChat/pull/2315)
 -  Fix [#2380](https://github.com/microsoft/BotFramework-WebChat/issues/2380). Added `botAvatarBackgroundColor` and `userAvatarBackgroundColor` to the default style options, by [@tdurnford](https://github.com/tdurnford) in PR [#2384](https://github.com/microsoft/BotFramework-WebChat/pull/2384)
+-  Added full screen capability to iframes in the `YouTubeContent` and `VimeoContent` components by [@tdurnford](https://github.com/tdurnford) in PR [#2399](https://github.com/microsoft/BotFramework-WebChat/pull/2399)
 
 ### Samples
 

diff --git a/packages/component/src/Attachment/VimeoContent.js b/packages/component/src/Attachment/VimeoContent.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 
-const VimeoContent = ({ alt, autoPlay, embedID, loop, styleSet }) => {
+const VimeoContent = ({ alt, autoPlay, embedID, loop, styleSet: { vimeoContent } }) => {
   const search = new URLSearchParams({
     autoplay: autoPlay ? 1 : 0,
     badge: 0,
@@ -15,8 +15,9 @@ const VimeoContent = ({ alt, autoPlay, embedID, loop, styleSet }) => {
 
   return (
     <iframe
+      allowFullScreen={true}
       aria-label={alt}
-      className={styleSet.vimeoContent}
+      className={vimeoContent}
       src={`https://player.vimeo.com/video/${encodeURI(embedID)}?${search}`}
     />
   );

diff --git a/packages/component/src/Attachment/YouTubeContent.js b/packages/component/src/Attachment/YouTubeContent.js
@@ -3,7 +3,7 @@ import React from 'react';
 
 import connectToWebChat from '../connectToWebChat';
 
-const YouTubeContent = ({ alt, autoPlay, embedID, loop, styleSet }) => {
+const YouTubeContent = ({ alt, autoPlay, embedID, loop, styleSet: { youTubeContent } }) => {
   const search = new URLSearchParams({
     autoplay: autoPlay ? 1 : 0,
     loop: loop ? 1 : 0,
@@ -13,8 +13,9 @@ const YouTubeContent = ({ alt, autoPlay, embedID, loop, styleSet }) => {
   return (
     // TODO: We should encodeURI the URL
     <iframe
+      allowFullScreen={true}
       aria-label={alt}
-      className={styleSet.youTubeContent}
+      className={youTubeContent}
       src={`https://youtube.com/embed/${embedID}?${search}`}
     />
   );