Responsive YouTube Video
The widget inserts a YouTube video in an HTML5 section element along with an optional heading, descriptive text and a footer to to create a fully responsive page. Vary the browser width to see the responsive action or use the browser's responsive mode.
The video is inserted by entering its ID number into the widget settings.
There are options for show/hide related videos, branding and the video title.
There is a field for entering a heading and a large box for entering descriptive text.
The container is made responsive by checking the "Full Width" box in the Metrics inspector and setting a maximum width.
A hosted video such as Vimeo is 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 and so on …
Search Engine Optimisation (SEO)
For best SEO results, videos, images and slideshows should be inserted in a container with a description. Otherwise the search engine spiders have no way of knowing what the video is about other than from any keywords used in the file name.
The widget has options for adding a heading and descriptive text. Since these are in the same parent container as the video and poster image, the search engines will see that this text is related to the media files.
The text can use a web safe font or a non websafe or Google hosted font with a web safe fallback. The heading can be styled for font size and text align and the text for size and line height.
The optional CTA style link can be configured to link to an internal or external page with the option to open in a new window. It can be used to link to the video on the YouTube site to encourage visitors to comment. Linking to a related site is good for SEO and is even better if there is a back link from that site.
The optional footer is fixed height with one line for the copyright info. The © symbol is created using ©
The font color, size and background color can be adjusted. There is a checkbox for adding a script to auto update the copyright year and another for adding a smooth scroll, back to the top chevron.