Recreate BBC iplayer (but I've also made it responsive)

The main problem with html5 video players out there at the moment is how can you make the whole video clickable on an iphone. I noticed that bbc iplayer was able to do it. The problem with the bbc site is that their web site detects whether you are on an mobile device or visiting from your desktop machine hence preventing me from looking at their code.

Anyway with a bit of tinkering I managed to look at the code. Now the problem that everyone is having is being able to have anything overlaying a video which you could perhaps use to assign a click function using javascript. IOS prevents you from doing this, anything you overlay the movie with even if you assign a click function to it will be ignored. So now I had the bbc iplayer html and I noticed that on the initial load, they're not using a video tag at all. They've just written their own div with various data tag values. Once the user clicks on this div, all the values then get injected into a video tag which is made on the click function. After that, the actual video player javascript is then run (I piggy backed on video js). Once I've generated the player, I have then made all the movies responsive on the page they lie on.

Please note I know the black box play button is abit naff but please feel free to style that up as you wish.

Please, please, please click the like buttons below. This has taken me alot of time to make so I hope you find it useful.

Check out the zip file!


Like It? Share It!


Leave a comment


Need help with this article?

Have you got a suggestion, compliment or need additional help with this article? Simply contact me at ajfhoward[@t] and I'll try to help as much as I can.