#Image & Media

Iframe container

Just open a div with the be-iframe-container class paste the code inside and then add the be-iframe-responsive class inside the iframe tag, and you're done!!

<div class="be-iframe-container">
<iframe class="be-iframe-responsive" id="odysee-iframe"...
</iframe>
</div>

Search for hack-iframe.Please note that the aspect ratio for the responsive iframes by default is set 16:9. If you want to change it for another standard, just set the appropriate padding-top. Eg. for 4:3 (75%), for 3:2 (66.66%), for 8:5 (62.5%) and for 1:1 (100%). For other measurements use the formula to calculate the desired ratio between width and height. Aspect ratio = height / width. The decimal point moves two digits to the right. Eg. For an aspect ratio of 4:3 (3/4 = 0.75) then our padding-top should be set to 75%.

Effects for images

Please hover over the images to see the effect.

<!-- Effects Classes -->
.be-ef-blur     .be-ef-blur-hover
.be-ef-contrast .be-ef-contrast-hover
.be-ef-sepia    .be-ef-sepia-hover
.be-ef-bw       .be-ef-bw-hover

Image is cortesy or Rawpixel
Cover of Collier's magazine, August 1913.