add title attribute to vimeo iframe (#1229)

* add title attr to vimeo iframe

* Move title prop to vimeo config

Co-authored-by: Pete Cook <pete@cookpete.com>

README.md

@@ -145,7 +145,7 @@ Key | Options
 `youtube` | `playerVars`: Override the [default player vars](https://developers.google.com/youtube/player_parameters?playerVersion=HTML5)<br />`embedOptions`: Override the [default embed options](https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player)<br />`onUnstarted`: Called when state changes to `unstarted` (usually when video fails to autoplay)
 `facebook` | `appId`: Your own [Facebook app ID](https://developers.facebook.com/docs/apps/register#app-id)<br />`version`: Facebook SDK version<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))<br />`attributes`: Extra data attributes to pass to the `fb-video` element
 `soundcloud` | `options`: Override the [default player options](https://developers.soundcloud.com/docs/api/html5-widget#params)
-`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)
+`vimeo` | `playerOptions`: Override the [default params](https://developer.vimeo.com/player/sdk/embed)<br />`title`: Set the player `iframe` title attribute
 `wistia` | `options`: Override the [default player options](https://wistia.com/doc/embed-options#options_list)<br />`playerId`: Override player ID for consistent server-side rendering (use with [`react-uid`](https://github.com/thearnica/react-uid))
 `mixcloud` | `options`: Override the [default player options](https://www.mixcloud.com/developers/widget/#methods)
 `dailymotion` | `params`: Override the [default player vars](https://developer.dailymotion.com/player#player-parameters)

src/players/Vimeo.js

@@ -23,19 +23,23 @@ export default class Vimeo extends Component {
     this.duration = null
     getSDK(SDK_URL, SDK_GLOBAL).then(Vimeo => {
       if (!this.container) return
+      const { playerOptions, title } = this.props.config
       this.player = new Vimeo.Player(this.container, {
         url,
         autoplay: this.props.playing,
         muted: this.props.muted,
         loop: this.props.loop,
         playsinline: this.props.playsinline,
         controls: this.props.controls,
-        ...this.props.config.playerOptions
+        ...playerOptions
       })
       this.player.ready().then(() => {
         const iframe = this.container.querySelector('iframe')
         iframe.style.width = '100%'
         iframe.style.height = '100%'
+        if (title) {
+          iframe.title = title
+        }
       }).catch(this.props.onError)
       this.player.on('loaded', () => {
         this.props.onReady()

src/props.js

@@ -46,7 +46,8 @@ export const propTypes = {
       params: object
     }),
     vimeo: shape({
-      playerOptions: object
+      playerOptions: object,
+      title: string
     }),
     file: shape({
       attributes: object,
@@ -155,7 +156,8 @@ export const defaultProps = {
         byline: false,
         portrait: false,
         title: false
-      }
+      },
+      title: null
     },
     file: {
       attributes: {},

types/vimeo.d.ts

@@ -2,6 +2,7 @@ import BaseReactPlayer, { BaseReactPlayerProps } from './base'
 
 export interface VimeoConfig {
   playerOptions?: Record<string, any>
+  title?: string
 }
 
 export interface VimeoPlayerProps extends BaseReactPlayerProps {