Viewport Size YouTube Video

To persuade a YouTube video to expand to fill the viewport is a little more complicated than for MP4 video and requires some CSS jiggery pokery using viewport units, intrinsic ratios and CSS transform.
The result would be pretty much useless to those with small laptops or touch devices like the iPad and Phone. For these devices, the YouTube iframe is made responsive using the CSS ::before and ::after psuedo elements - one floated left to set up the responsive container and the other to clear the float.
If viewing this page on a computer, increase the browser to full width and then reduce it to the width of a phone to see the changes.
Aspect Ratio
By default, the widget is set up to work with the standard size of video which is 560 x 315 with an aspect ratio of 16:9. For a video with a different aspect ratio, enter its width and height into the widget settings and the correct aspect ratio will be calculated by the CSS.
Controls
There are checkboxes to show controls and to play inline on iPhones and a box for entering a start time in seconds. This example is set to start 36 seconds into the video.
The only other control is a checkbox to turn on autoplay for those foolish enough to use this function.
Overlay
The optional h1 heading sits at the bottom of the viewport when viewed on computers and below the video when viewd on touch devices
The heading is centered and has controls to set different styles for computer and mobile.
The text block is only visible on hover and has controls for positioning it left or right and itop or bottom.