Responsive Multimedia

create absolute responsive multimedia elements with aspect-ratio resizing support, with the Phenix multimedia plugin you can create images, backgrounds, videos, mixed backgrounds, iframe, and also Video & Audio players.

Multimedia Overview

phenix .multimedia(options) is all about creating responsive media elements for images, videos, or iframe, it was created in Tornado to solve a problem with image stretch in layout responsive, and to fix it we make the images as css background for a block-level element then make the background-size: cover to prevent any visual issues,

but in Phenix, it has evolved to include videos embed, gradients, mixed backgrounds, and also creating customizable advanced video/audio players, which you can learn more about in Video Player and Audio Player documents, and it uses the aspect-ratio elements as the root element to build any of these fancy multimedia aspect-ratio responsive elements.

Aspect-Ratio Element

The aspect ratio of an element is the ratio of its width to its height, and is expressed with a relative height percentage that resizes with the element width, it’s a built-in Phenix with a padding-bottom by percentage trick, the element has usually a relative position, to help create Media elements inside of it that act the same as the aspect-ratio element.

Core Concept

the .aspect-ratio element is built with CSS tricks and not a natively supported feature of JS or CSS the element has no specific width and its height is calculated by padding-bottom: *% to make the element height resizable relative to its width, here are a few points to keep in mind when you work with aspect-ratio elements.

• aspect-ratio element: most have a display:block like, which can be any of [block, flex, grid, inline-block, etc] and any display:inline will cause problems.
• the element: that any child must have a position relative, absolute, fixed, sticky to work correctly.
• the element: can’t be a direct column of the grid system and if you use it so, make sure to remove the padding-bottom.
• the media: children of the element usually have a position: absolute and width, and height of 100% to fill the parent.
• the children’s: elements act differently from the media child’s the regular elements are centered in the aspect-ratio parent and take their own width/height.

<!-- Basic Init for Multimedia -->
<div class="px-media"
     data-src="source-file-url"
     data-type="background || image || embed || iframe || mixed-bg || gradient || html">
</div>
<!-- // Basic Init for Multimedia -->

//====> Enable Multimedia <====//
Phenix('.px-media').multimedia();

Set Background

Multimedia backgrounds can set dynamic css backgrounds to the element, by defining the type of media as the background will make it so, the default size of the multimedia element is a 1×1 ratio, and it accepts custom % size.

and you can also turn off the aspect ratio sizing by making data-size="none" to turn it off or by adding a class name ratio-x to the element.