Qfyilyi

I am trying to make a page with looping background video with React js.

When I compile the code I can see the video is playing straight away on the browser but when I click the link of website, the video is not playing. I should click the Home button in the page and starts again.

I used

<video src={BackVideo} autoplay="true" loop="true">

I could not use :

react-native-video

library because I got an error when I import the library in the code.

Also I have one more problem that the video is not playing in Safari at all.

Can someone help me please.

Here is my part of Javascript file

render() {

    return (

      <div>

        <div className="bgded overlay">

        {/* Menu, call the menu component with the ChangeViewButtonClick function recieved from Dashbaord */}

          <Menu ChangeViewButtonClick={this.props.ChangeViewButtonClick} />



        </div>



        <header className="v-header container">



      <div class="fullscreen-video-wrap">



        <video src={BackVideo} autoplay="true" loop="true"> </video>



    </div>

    <div className="header-overlay"></div>

    <div className="header-content">



       <article>

              <h1 className="heading">Something</h1>

              <h2 className="heading">something too</h2>







            </article>



    </div>

       </header>



        {/* Start of Overview */}

        <div className="wrapper row3">

          <main className="hoc container clear">

            <article className="two_third first">

              <h4 className="font-x2 font-x3">

                Lorem ipsum dolor sit, amet consectetur adipisicing elit. 

                Exercitationem, nihil.

              </h4>





            </article>



          </main>

        </div>

        {/* End of Overview */}

      </div>

I figure out and might someone have the same problem.

use autoPlay loop muted so;

<video className='VideoTag' autoPlay loop muted>

      <source src={BackVideo} type='video/mp4'/>

</video>