Skip to main content

Introduction

The banner mode of the NXD-YouTubeBox module for Joomla! allows you to create video banners based on a YouTube video or playlist. Thanks to autoplay, BlockLayer and various styling features, you can place beautiful, animated video banners on your website.

In banner mode, the module allows you to choose your own aspect ratio for the video. Overlapping areas are cropped/hidden in banner mode.

This page demonstrates some of the possibilities offered by the banner mode of the NXD YouTubeBox. Brand new in module version 2.x, banner mode now also offers banners in the so-called "skyscraper" format for the first time.

Banner Mode (clickable)

Learn more

The Banner Mode is used to create a video banner based on a YouTube video. This feature of the NXD YouTubeBox for Joomla! allows only a section of the video to be displayed. Additional settings allow the position of the video on the Y-axis to be configured in the horizontal version. Using a freely selectable aspect ratio (such as 16:3), you can define how high the banner should be in the module settings. Thanks to full responsiveness, you can display wonderful video banners on your page.

Using BlockLayer

Learn more

The BlockLayer prevents accidental or deliberate interaction through click events on the video. Only by using the BlockLayer can one speak of a real "banner". In addition to simply preventing click events on videos, the BlockLayer offers additional features such as:

  • Color Overlay
  • Inset Shadow
  • Custom Link

BlockLayer and Shadow Box

Learn more

Regardless of the BlockLayer, the video container (layout unspecific) can also be equipped with a shadow box and rounded corners. Specific module settings for the NXD YouTubeBox v2.x have been developed especially for the shadow box options.

BlockLayer and Inner Shadow

Learn more

As mentioned earlier, using BlockLayer allows you to utilise additional features, such as giving the video container an inner shadow to achieve a "recessed effect". Combined with the freely selectable border radius, this can generate a beautiful depth effect.

Using BlockLayer (colored)

Learn more

Another potentially useful option is the ability to assign an rgba() colour (i.e. with opacity) to the BlockLayer directly in the module settings. Depending on the intended use, this can help to better integrate the video into the website or make it less noticeable.

BlockLayer with Custom Link

Learn more

As already mentioned, the BlockLayer can also be used to embed a link. A URL field is available for this purpose in the module settings. External and internal links can be stored. The field for an Aria Description allows WCAG 2.1 valid links to be embedded. The description will be used as title and as aria-label attribute on the link.

BlockLayer and Custom Branding

Learn more

In addition to the link that can be defined on the BlockLayer, the NXD YouTubeBox also allows you to define a logo/image as "custom branding". This can be positioned at the top left, top right, bottom left or bottom right. You can also define a link for the custom branding. This works even if another link has already been defined on the BlockLayer.

Vertical Banner (Skyscraper)

Learn more

But what if we need a vertical banner instead of a horizontal one, a so-called skyscraper? In version 2.x, the NXD YouTubeBox offers you exactly this feature!

The video is zoomed centrally to the required height (based on the configured aspect ratio). The superfluous areas (left and right) are hidden.

Vertical  / Horizontal Alignment

Learn more

Since parts of the video are cropped, the NXD YouTubeBox allows you to define the area to be displayed. By default, videos are centred in banner mode. If you select an aspect ratio that generates a horizontal banner, you can adjust the vertical position in the settings. When configuring for a skyscraper, you can adjust the horizontal position of the video.

Vertical Alignment

The vertical alignment can be selected from -25% to 25%. It can therefore cover the entire height of the video.

Horizontal Alignment

The horizontal shift is a bit tricky – here, the percentage value can change depending on the selected aspect ratio. Therefore, it is possible to shift from -200% to 200%. As a rule, however, only minimal adjustments should be necessary here to display either the left or right side of the video.