Mobile Website Vimeo Video
The widget inserts a Vimeo video in an HTML5 section element along with an optional heading, descriptive text and a footer to to create a fully responsive page.
The video is inserted by entering its ID number into the widget settings.
There are options for show/hide the Title, Byline and Portrait image and to change the controls color. This is done using a hex color number without the hash (#) sign.
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 …
For best SEO results, videos, images and slideshows should be inserted in a container with a description.
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.
Text links can be created as described in the Info section and the controls in the widget settings are for link color, background and opacity, text decoration top/bottom and left/right padding and border radius.
Adding padding to text hyperlinks is absolutely essential on mobile websites to increase the target area for fingertips rather than a cursor!
Links should be at least 28px in height and 32px wide for fingertips or 40px for thumbs.
The optional footer is fixed height with one line for the copyright info. As mentioned previously, 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 to the top chevron.