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-type="background || image || embed || iframe || mixed-bg || gradient || html">
<!-- // Basic Init for Multimedia -->
//====> Enable 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.

<!-- Aspect Ratio Media as Background -->
<div class="px-media" data-src="background-url" data-type="background"></div>
//====> Multimedia Backgrounds <====//
type : "background", //===> Media Type

Set Image

the image media type is exactly like the background the only difference is it creates a hidden image HTML tag for SEO-friendly media, and do not forget the default size of the multimedia element is a 1×1 ratio, and it accepts custom % size and you can always turn it off with none.

<!-- Aspect Ratio Media as Images -->
<div class="px-media" data-src="image-url" data-type="image"></div>
//====> Multimedia Images <====//
type : "image", //===> Media Type

Set Gradient

the Gradient media type is just an extra option since we play with css backgrounds we can provide the content writers and the user a dynamic inline gradient as the background of any element, and you can set off the aspect ratio sizing and just act with it as nothing more than a css gradient background.

<!-- Aspect Ratio Media as Gradient -->
<div class="px-media ratio-16x9" data-type="gradient" data-mode="linear" data-gradient="0, #000, #1c1c1c" data-repeat=""></div>
//====> Multimedia Gradient <====//
type : "gradient", //===> Media Type
//===> Gradient Options <===//
gradient : {
value : [array], //===> CSS Gradient Value [rtoation, color1, color2, etc...]
mode : string, //===> [linear, radial, conic]
repeat : boolean, //===> Gradient Repeat [true, false]

Mixed Backgrounds

the Mixed Backgrounds type lets you create multiple backgrounds for the element like an image background and an overlay gradient above it, it’s a little bit complex but if you managed to understand how the CSS multiple backgrounds works, you will use it perfectly.

<!-- Aspect Ratio Media as Mixed Backgrounds -->
<div class="px-media" data-src="http://via.placeholder.com/720x480" data-type="mixed-bg" data-gradient="rgba(0,196,255, 0.5), rgba(26,105,244, 0.5)"></div>
//====> Multimedia Mixed Backgrounds <====//
type : "mixed-bg", //===> Media Type
//===> Gradient Options <===//
gradient : {
value : [array], //===> CSS Gradient Value [rtoation, color1, color2, etc...]
mode : string, //===> [linear, radial, conic]
repeat : boolean, //===> Gradient Repeat [true, false]

iFrame Viewer

the iframe type of Phenix multimedia lets you embed anything that can be embedded with HTML iframe tags like google maps or any website or webpage.

<!-- Aspect Ratio Media as iFrame -->
<div class="px-media" data-src="url" data-type="iframe"></div>
<!-- Media [iframe] -->
<div class="px-media" data-type="iframe">
<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m12!1m3!1d13911.753124432982!2d31.205395799999998!3d29.342804500000003!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!5e0!3m2!1sen!2seg!4v1648279821842!5m2!1sen!2seg" width="600" height="450" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade"></iframe>
//====> Multimedia iFrame <====//
type : "iframe", //===> Media Type

Embed Media

the embed media type which is usually video media streamed from platforms like YouTube, Vimeo, etc, has a specific way for its URL to be viewed, Phenix works out that for you all you have to do is give it the URL for the embedded media from any platform and it will handle it for you into an iFrame inside aspect ratio element.

Advanced Audio & Video

the Advanced Audio and Video Player is the most complex thing in the multimedia plugin of Phenix, which has a custom player built in so you can do much more useful stuff for building streaming apps and designing your player for your app and you can know more in their document.

<!-- Embed Media from Video File -->
<div class="px-media" data-src="video-url" data-type="embed" data-embed="video" data-controls="true"></div>
<!-- Embed Media from YouTube -->
<div class="px-media" data-src="url" data-type="embed" data-embed="youtube"></div>
<!-- Embed Media from Vimeo-->
<div class="px-media" data-src="URL" data-type="embed" data-embed="vimeo"></div>
<!-- Embed Media from Any Other Service Like Dailymotion -->
<div class="px-media" data-src="URL" data-type="embed" data-embed="other"></div>
//====> Multimedia Embed <====//
type : "embed", //===> Media Type
embed : "video", //===> Embed Source
controls : true, //====> nable/Disable Embed Controls
autoplay : false, //====> Enable/Disable Embed Autoplay
loop : false, //====> Enable/Disable Embed infinite loop
muted : false, //====> Enable/Disable Embed Audio

Element Size

phenix multimedia plugin uses predefined aspect ratio sizes from Phenix Aspect Ratio elements, which you can set with the data-size attribute or the size option from the js function, or by adding a class name ratio-#{size} to the media element,

and the multimedia plugin adds an extra option to the aspect ratio sizing so that you can define the size by custom percentage number instead of the ratio prefix.

Note: to overwrite the ratio size manually use css variable (–ratio-size) with any .ratio-* classes.

<!-- Aspect Ratio Square Size -->
<div class="px-media ratio-1x1" data-src="url" data-type="background"></div>
<!-- Aspect Ratio Classic Size -->
<div class="px-media ratio-4x3" data-src="url" data-type="background"></div>
<!-- Aspect Ratio HD Size -->
<div class="px-media ratio-16x9" data-src="url" data-type="background"></div>
<!-- Aspect Ratio Landscape Size -->
<div class="px-media ratio-21x9" data-src="url" data-type="background"></div>
<!-- Aspect Ratio No Predefined Size -->
<div class="px-media ratio-x" data-src="url" data-type="background"></div>
<!-- Aspect Ratio Square Size -->
<div class="px-media" data-src="url" data-type="background" data-size="1x1"></div>
<!-- Aspect Ratio Classic Size -->
<div class="px-media" data-src="url" data-type="background" data-size="4x3"></div>
<!-- Aspect Ratio HD Size -->
<div class="px-media" data-src="url" data-type="background" data-size="16x9"></div>
<!-- Aspect Ratio Landscape Size -->
<div class="px-media" data-src="url" data-type="background" data-size="21x9"></div>
<!-- Aspect Ratio Custom Size -->
<div class="px-media" data-src="url" data-type="background" data-size="75%"></div>
<!-- Aspect Ratio No Predefined Size -->
<div class="px-media" data-src="url" data-type="background" data-size="none"></div>


the multimedia plugin has a lazy-loading option to make the media load when the user arrives at its location on the document while he is scrolling, and as any other option, it can be activated from the HTML attribute or js option.

<!-- Aspect Ratio Square Size -->
<div class="px-media" data-src="url" data-type="background" data-size="1x1" data-lazyloading="ture"></div>
//====> Multimedia Lazyloading <====//
lazyloading : true, //===> Enable Lazy-Loading

Options Table

OptionDescriptionDefaultData Type
typethe type of media [background, image, embed, iframe, mixed-bg, gradient, html]backgroundString
sizethe ratio size of the media element [1x1, 4x3, 16x9, 16x10, 21x9, *%, false]60%String
srcthe source URL for the media file.noneString
lazyloadingenable or disable lazy-loading for all media.false Boolean
altalternative text for the image media type.noneString
coverthe cover image for the video media type.noneString
playerthe player type for video and audio media [phenix, html].htmlString
gradientthe gradient media type options.noneObject
valuethe gradient value or [data-gradient] attributenone Array
modethe gradient mode [linear, radial, conic]linearNumber
repeatthe gradient repeater mode.falseBoolean
embedthe embedded source [video, youtube, vemio, other]videoString
controlsthe embedded media controls enable/disabletrueBoolean
Autoplaythe embedded media Auto-Play enable/disablefalseBoolean
loopthe embedded media infinite loop enable/disablefalseBoolean
mutedthe embedded media audio enable/disablefalseBoolean
Multimedia Options Table.

Table of Content