Added allowFullScreen prop to video content iframes (#2399)

* Added fullscreen to video iframes * Update CHANGELOG.md Co-Authored-By: William Wong <compulim@users.noreply.github.com>
microsoft · Sep 13, 2019 · 39a52cf · 39a52cf
1 parent 9282174
commit 39a52cf
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 `IFRAME` 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}`}
     />
   );