Embedded Audio / Video
ESL Media
No value specified
No value specified
Settings
<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>
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 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
<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>
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();