5

I have a react application where i am using html5 video tag to show a cover video. It works on ipad, android and all the major browsers but on iphone it just shows a glimpse of a play button which if clicked shows a full page video.

class FrontPage extends React.Component{
  constructor(props) {
    super(props);
    this.authorize = [''];
  }
  render() {
    return (
      <div>
        <video controls="true" style={BGstyle} preload="yes" autoPlay muted loop width="100%" height="auto">
          <source src="/images/film.mp4" type="video/mp4" />
          Your browser does not support the video tag.
        </video>
        <Ladder/>
        <SignUp/>
      </div>
    );
  }
}
var BGstyle = {
  position: "absolute",
  zIndex:999,
  right:0,
  bottom:0,
  minWidth:'100%',
  width: 'auto',
  backgroundSize:"cover"
}

export default FrontPage;

you can see it on www.viogto.dk

  • I figured out it's a css error, if i delete all the css it works on iphone. How do i make a cover video work on iphone? –  Oct 04 '16 at 13:27

1 Answers1

16

For iOS 10+

Try the playsinline attribute. But in camel case for react : 

<video playsInline>

Source - New video Policies for iOS

In iOS 8 and iOS 9

Short answer: use iphone-inline-video, it enables inline playback and syncs the audio.

Source - https://stackoverflow.com/a/36348909/3337722

Damien Artero
  • 13
  • 3
Shannon Young
  • 1,536
  • 1
  • 17
  • 26