Embedded Audio / Video

Playground

ESL Media

No value specified
No value specified
Settings
Source code (HTML)
<h3 class="text-center">ESL Media</h3>

<div class="img-container img-container-16-9 img-container-loaded" style="border: solid black 1px;">
  <esl-media group="demo-media" class="esl-media esl-media-demo-1" controls="" tabindex="0"></esl-media>
</div>

<div class="btn-group btn-group-centered">
  <button class="btn btn-sec-blue" esl-media-control="{target: '::closest(uip-root)::find(.esl-media)', action: 'play'}">Play
  </button>
  <button class="btn btn-sec-blue" esl-media-control="{target: '::closest(uip-root)::find(.esl-media)', action: 'pause'}">Pause
  </button>
  <button class="btn btn-sec-blue" esl-media-control="{target: '::closest(uip-root)::find(.esl-media)', action: 'stop'}">Stop
  </button>
</div>
Source code (JS)
import { ESLMedia } from '@exadel/esl';

// Keep only those you need
import '@exadel/esl/modules/esl-media/providers/iframe-provider'; // Recommended as a fallback
import '@exadel/esl/modules/esl-media/providers/html5/audio-provider';
import '@exadel/esl/modules/esl-media/providers/html5/video-provider';
import '@exadel/esl/modules/esl-media/providers/youtube-provider';

ESLMedia.register();

Video background

Cropping and decorations features of ESL Media allows us to use it as an active background for the block.

Background Video

Background media

Lorem ipsum dolor sit amet consectetur adipiscing elit curabitur ultrices. Et mi suscipit eget vulputate ante proin vel pretium enim. Vivamus venenatis eu urna tempor blandit nullam pellentesque metus rhoncus. Mauris mollis neque sed tincidunt tellus nunc ac nulla ut. Purus etiam id dui justo sapien scelerisque viverra ligula aenean.

Center
Center
Settings
Source code (HTML)
<div class="demo-marquee dark" style="height: 400px">
  <esl-media class="bg-content esl-media-bg esl-animate-fade" ready-class="in" media-type="video" media-src="/assets/media/video.mp4" fill-mode="cover" play-in-viewport="" lazy="" autoplay="" muted="" loop="" playsinline="">
  </esl-media>
  <div class="demo-content">
    <p class="h3">Background media</p>
    <p><!-- text x50 --></p>
  </div>
</div>
Source code (JS)
import { ESLMedia } from '@exadel/esl';

// Keep only those you need
import '@exadel/esl/modules/esl-media/providers/html5/video-provider';
import '@exadel/esl/modules/esl-media/providers/youtube-provider';

ESLMedia.register();