YouTube Videocast

EverWeb Resize Header On Scroll Widget

05/04/2016

The YouTube video is inserted by entering its ID number. The player has options to show/hide related videos, branding and info. It can be set to autoplay but this are NOT recommended!
The progress bar color can be switched between red and white.
There is a heading, an optional date field and a large box for entering descriptive text.
The link to YouTube for vistors to link to, comment or embed the video is also optional.
The items are inserted in an HTML5 section element which can be styled with a border and/or box shadow.
The item can be made responsive by checking the "Full Width" box in the Metrics inspector and setting a maximum width as can be seen by the above example.
A hosted videos such as YouTube are displayed in an iframe. To make this responsive, the code requires the intrinsic aspect ratio to be calculated and inserted in the widget settings. This is calculated from …

video file height ÷ by the video file width x 100

A video with an aspect ratio of 16:9 has an intrisic aspect ratio of 56.25. If the aspect ratio is 4:3, the intrisic aspect ratio is 75 ans so on …
Comments
The comments section is optional and uses Disqus. It requires the Disqus "shortname" for general use and the page URL and identifier for use with a specific podcast or videocast.
Footer
The optional footer has a function for auto updating the website copyright date and a smooth scroll, back to the top chevron style tab. Along with a suitable header/navigation widget, this allow the creation of a fully responsive page which will display correctly on computers, tablets and mobile phones.

© RageSW 2016

© EverWeb Widgets -

EverWeb Widgets