{# Settings #} {% set root = "../../" %} {% set mainNavActive_1 = "shortcodes" %} {% set sidebarNavActive_1 = "shortcode-base-media-videos" %} {% set title = "Media Videos" %} {% include "html/assets/include/nunjucks/partials/head.njk" %} {% include "html/assets/include/nunjucks/partials/core-fonts.njk" %} {% include "html/assets/include/nunjucks/partials/core-css.njk" %} {% include "html/assets/include/nunjucks/partials/core-icons.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-showcode.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-unify.njk" %} {% include "html/assets/include/nunjucks/partials/css/css-custom.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/headers/header-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/sidebars/sidebar-shortcode-nav.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/page-title/shortcode-page-title/shortcode-page-title-base.njk" %}

Responsive Video Examples

You may use Vimoe, Youtube, Facebook and HTML5 videos by using resonsive aspect ratio utility classes. In these examples, we use Aspect ratio (16:9) by default using the following classes .embed-responsive and .embed-responsive-16by9

HTML5 example

{% set contentTarget = "#shortcode1" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Vimeo example

{% set contentTarget = "#shortcode2" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Youtube example

{% set contentTarget = "#shortcode3" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Responsive Aspect Ratios

Allow browsers to determine video or slideshow dimensions based on the width of their containing block by creating an intrinsic ratio that will properly scale on any device by using .embed-responsive and .embed-responsive-* classes, * can be 21by9, 16by9, 4by3 and 1by1. For more details, please check out Bootstrap Responsive embeds page. All examples by default uses Vimeo embed vidoes.

Aspect ratio (16:9)

Use a class embed-responsive-16by9 for aspect ratio (16:9)

{% set contentTarget = "#shortcode5" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Aspect ratio (21:9)

Use a class embed-responsive-21by9 for aspect ratio (21:9)

{% set contentTarget = "#shortcode6" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Aspect ratio (4:3)

Use a class embed-responsive-4by3 for aspect ratio (4:3)

{% set contentTarget = "#shortcode7" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Aspect ratio (1:1)

Use a class embed-responsive-1by1 for aspect ratio (1:1)

{% set contentTarget = "#shortcode8" %} {% set modalID = "#modalMarkup" %} {% include "html/assets/include/nunjucks/partials/blocks/show-code.njk" %}

Parallax Video Background with Fancybox

Watch Unify Intro
Show code Copy code
{% include "html/assets/include/nunjucks/partials/blocks/cta/cta-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/footers/copyright-footer-main.njk" %} {% include "html/assets/include/nunjucks/partials/blocks/go-to-top/go-to-top-1.njk" %}
{% include "html/assets/include/nunjucks/partials/blocks/modals/modal-markup.njk" %} {% include "html/assets/include/nunjucks/partials/core-js.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-dzsparallaxer.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-jquery-ui-core.njk" %} {% include "html/assets/include/nunjucks/partials/js/js-show-code.njk" %}