Play YouTube Video
youtube-video content type lets you provide a a youtube video url using videoUrl parameter.
Here we are going to load a video which are normally 16:9 aspect ratio. You can enter any video url to play inside the modal.
See below the code that makes it happen -
const urlBox = document.getElementById('video-url');
if(urlBox) {
document.getElementById('play-video')?.addEventListener('click', () => {
let url = urlBox.value.trim();
if(url) {
ModalManager.instance.addModal({
body : {
noPadding : true,
contentType : 'youtube-video',
videoUrl : url
},
aspectRatio : 16/9,
maxWidth : {
value: 90,
unit : 'vw'
},
width : {
value : 800,
unit : 'px'
}
});
}
});
}Similar can be done for shorts, except they are of 9:16 aspect ratio. Enter a short's url in the text box below and hit the play button.
See below the code that makes it happen, it is similar to the normal video, but since aspect ratio is reverse we now work with heights, instead of widths.
const shortUrlBox = document.getElementById('video-url2');
if (shortUrlBox) {
document.getElementById('play-video2')?.addEventListener('click', () => {
let url = shortUrlBox.value.trim();
if (url) {
ModalManager.instance.addModal({
body: {
noPadding: true,
contentType: 'youtube-video',
videoUrl: url
},
aspectRatio: 9 / 16,
maxHeight: {
value: 90,
unit: 'vw'
},
height: {
value: 700,
unit: 'px'
}
});
}
});
}