Youtube video is ubiquitous. Embedding Youtube videos into a web page is as straightforward as it sounds. What also seems natural is to full-screen the video on touching the play icon of the video on mobile devices. This feature is important for mobile user experience as the full screen control is quite small to "aim". Google results on this topic showed many people had been looking for a solution on this and couldn't get a simple way to work out, as Youtube doesn't provide an API to full screen videos. In this post, I am showing a relatively simply way to achieve this user experience with fairly few lines of code. Code example is shown below. In the example, I use React as there are many nice plugins ready to start. Here is a list of them: screenfull: a simple wrapper of cross browser JavaScript implementation of full screen API. https://www.npmjs.com/package/screenfull device-detector-js: a way of detecting user device with a wide range of device coverage...
To attain knowledge, add things everyday. To attain wisdom, remove things every day.