title: Unable to make react-player light prop always true
body: <p>I have implemented a slider like property. Inside each slide, there is a video and its name. I am using [react-player][1] to display the video thumbnail. Once you click on any of the video a modal will get open and will play the video I have rendered the react-player is that the light property is always true. But it's not working once you click on the video that particular position of the slider loses the light property.</p>
  <pre><code>import React, { Component } from 'react'
  import IndividualSlider from './IndividualSlider'
  import ModalVideo from 'react-modal-video'
  import { Modal, Button } from 'antd';
  
  import ReactPlayer from 'react-player/youtube';
  
  
  export class Experience extends Component {
    constructor(){
      super();
      this.state={
          Video:[
              {
                  url:'https://www.youtube.com/embed/H2yCdBIpxGY',
                  name:'Recurssion'
              },
              {
                  url:'https://www.youtube.com/embed/s5YgyJcoUI4',
                  name:'Array'
              },
              {
                  url:'https://www.youtube.com/embed/_C4kMqEkGM0',
                  name:'DP'
              },
              {
                  url:'https://www.youtube.com/embed/VBnbYNksWTA',
                  name:'Graph'
              },
              {
                  url:'https://www.youtube.com/embed/M1q3Pzk2UXs',
                  name:'Trie'
              }
          ],
          modalIsOpen:false,
          modalLink:&quot;&quot;
      }
      this.left = this.left.bind(this);
      this.right=this.right.bind(this);
      this.modalPlay = this.modalPlay.bind(this);
      this.handleCancel = this.handleCancel.bind(this);
      this.handleOk = this.handleOk.bind(this);
  }
  
      handleOk = e =&gt; {
        console.log(e);
        this.setState({
        modalIsOpen: false,
       });
      };
  
      handleCancel = e =&gt; {
        console.log(e);
        this.setState({
        modalIsOpen: false,
       });
      };
  
     modalPlay=(link)=&gt;{
       this.setState({
          modalIsOpen:true,
          modalLink:link
      })
     }
  
    right=()=&gt;{
      let arr = this.state.Video;
      let temp = arr[0];
      arr.shift();
      arr.push(temp);
      this.setState({
          Video:arr
      })
     }
  
     left=()=&gt;{
      let arr = this.state.Video;
      let temp = arr[arr.length-1];
      arr.pop();
      arr.unshift(temp);
      this.setState({
          Video:arr
      })
     }
  
     render() {
      return (
          &lt;div className=&quot;ExperienceAClass&quot;&gt;
              &lt;div className=&quot;OneWeekHeading&quot;&gt;
                  &lt;h2 className=&quot;OneWeekCaption&quot;&gt;
                      Experience a class
                  &lt;/h2&gt;
                  &lt;hr className=&quot;MentorsCaptionUnderLine&quot; align=&quot;center&quot; width=&quot;50%&quot;&gt;&lt;/hr&gt;
              &lt;/div&gt;
  
               &lt;Modal
                  title=&quot;&quot;
                  visible={this.state.modalIsOpen}
                  onOk={this.handleOk}
                  onCancel={this.handleCancel}
                  footer={null}
  
              &gt;
                &lt;ReactPlayer className=&quot;ModalVideo&quot; url={this.state.modalLink}/&gt;  
               &lt;/Modal&gt;    
              
              &lt;div className=&quot;EntireSliderWrapper&quot;&gt;
              &lt;a class=&quot;prev&quot; onClick={this.left}&gt;
              &lt;/a&gt;
  
              &lt;div className=&quot;VideoSlider&quot;&gt;
                  {this.state.Video.map((child,index)=&gt;{
                          return &lt;IndividualSlider modalPlay={this.modalPlay} url={child.url} name= 
                                  {child.name}/&gt;
                  })
                  }
              &lt;/div&gt; 
              &lt;a class=&quot;next&quot; onClick={this.right}&gt;
              &lt;/a&gt;       
              &lt;/div&gt;      
          &lt;/div&gt;       
        )
    }
  }
  
  export default Experience
  </code></pre>
  <p>And the IndividualSlider component is as follows:</p>
  <pre><code>import React, { Component } from 'react'
  import ReactPlayer from 'react-player/youtube';
  
  
  export class IndividualSlider extends Component {
   constructor(){
      super();
      this.state={
          light:true
      }
      this.onClick=this.onClick.bind(this)
   }
  
    onClick=()=&gt;{
      let modalPlay=this.props.modalPlay;
      modalPlay(this.props.url);
     }
  
     render() {
       return (
          &lt;div className=&quot;VideoDetails fade&quot;&gt;
               &lt;ReactPlayer className=&quot;YoutubeVideo&quot; onClick={this.onClick} light = 
                {this.state.light} url={this.props.url}/&gt;
              &lt;p&gt;
                  {this.props.name}
              &lt;/p&gt;
          &lt;/div&gt;
      )
    }
  }
  
  export default IndividualSlider
  </code></pre>
  <p>In the above code, I have made the light prop to be always true. As the slide is clicked this component renders but the thumbnail property is not held.</p>
  <p><strong>Also, When the modal closes the video keeps on playing. How to deal with that?</strong></p>
  <p>As you can see the video which was played regain it's <code>light={true}</code> once slid but the position where it was when played doesn't imply <code>light={true}</code></p>