Mobile Website YouTube Video

The YouTube video is inserted by entering its ID number. The player has options to show/hide related videos, branding and info.
The progress bar color can be switched between red and white and the start time can be changed.
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 YouTube 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 …
Text
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.
Hyperlink
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.
Footer
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.

© EverWeb Widgets -

EverWeb Widgets