Responsive Media YouTube Video Header
The responsive header has a full size background image which can be set to a fixed height. There is the option to set a different height on mobile phones or both can be set to viewport height as can be seen on the next page.
Images
The widget loads different sizes of images for each device type - computer, tablet and phone - for increased efficiency and faster download times on touch devices.
Header
The overlay header has an h1 heading and an optional logo and has adjustable height. The heading can use a web safe font or a non web safe or Google hosted font with a web safe fallback. It can be adjusted for font size, color, style and weight and letter spacing. The background color has an opacity slider.
Logo
The optional logo is positioned top left and has controls for adjusting its size and its position relative to the top and left.
h2 Heading
The optional h2 heading overlays the bottom of the image. The text is centered and it inherits the font family, color and background color from the main heading. The font size is adjustable computer/tablet and there is a separate mobile setting.
Video
The centered play button has options for changing the color, setting the hover color and showing a title on hover when viewed on computers.
The video only requires the YouTube ID to be inserted in the widget settings. It opens in a lightbox window and has options to set the maximum width to that of the video file and to add a contrasting border if required.