diff --git a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts index 3c6bda16c..140af89f9 100644 --- a/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts +++ b/client/src/app/+admin/moderation/video-block-list/video-block-list.component.ts @@ -155,6 +155,7 @@ export class VideoBlockListComponent extends RestTable implements OnInit { title: false, warningTitle: false }), + aspectRatio: entry.video.aspectRatio, embedTitle: entry.video.name }) } diff --git a/client/src/app/shared/shared-main/video/embed.component.ts b/client/src/app/shared/shared-main/video/embed.component.ts index 017fbf357..426e2f57a 100644 --- a/client/src/app/shared/shared-main/video/embed.component.ts +++ b/client/src/app/shared/shared-main/video/embed.component.ts @@ -11,7 +11,7 @@ import { Video } from '@peertube/peertube-models' templateUrl: './embed.component.html' }) export class EmbedComponent implements OnInit { - @Input() video: Pick + @Input({ required: true }) video: Pick & Partial> embedHTML: SafeHtml @@ -27,7 +27,8 @@ export class EmbedComponent implements OnInit { title: false, warningTitle: false }), - embedTitle: this.video.name + embedTitle: this.video.name, + aspectRatio: this.video.aspectRatio }) this.embedHTML = this.sanitizer.bypassSecurityTrustHtml(html) diff --git a/client/src/app/shared/shared-share-modal/video-share.component.ts b/client/src/app/shared/shared-share-modal/video-share.component.ts index 24c9cdeca..ccc46676c 100644 --- a/client/src/app/shared/shared-share-modal/video-share.component.ts +++ b/client/src/app/shared/shared-share-modal/video-share.component.ts @@ -158,7 +158,7 @@ export class VideoShareComponent { const { responsive } = options return this.hooks.wrapFun( buildVideoOrPlaylistEmbed, - { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive }, + { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive, aspectRatio: this.video.aspectRatio }, 'video-watch', 'filter:share.video-embed-code.build.params', 'filter:share.video-embed-code.build.result' @@ -193,7 +193,12 @@ export class VideoShareComponent { const { responsive } = options return this.hooks.wrapFun( buildVideoOrPlaylistEmbed, - { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive }, + { + embedUrl: await this.getPlaylistEmbedUrl(), + embedTitle: this.playlist.displayName, + responsive, + aspectRatio: this.video.aspectRatio + }, 'video-watch', 'filter:share.video-playlist-embed-code.build.params', 'filter:share.video-playlist-embed-code.build.result' diff --git a/client/src/root-helpers/video.ts b/client/src/root-helpers/video.ts index 4ee29df13..eec00ce0e 100644 --- a/client/src/root-helpers/video.ts +++ b/client/src/root-helpers/video.ts @@ -3,9 +3,10 @@ import { HTMLServerConfig, Video, VideoPrivacy, VideoPrivacyType } from '@peertu function buildVideoOrPlaylistEmbed (options: { embedUrl: string embedTitle: string + aspectRatio?: number responsive?: boolean }) { - const { embedUrl, embedTitle, responsive = false } = options + const { embedUrl, embedTitle, aspectRatio, responsive = false } = options const iframe = document.createElement('iframe') @@ -21,7 +22,9 @@ function buildVideoOrPlaylistEmbed (options: { const wrapper = document.createElement('div') wrapper.style.position = 'relative' - wrapper.style.paddingTop = '56.25%' + wrapper.style.paddingTop = aspectRatio + ? (1 / aspectRatio * 100).toFixed(2) + '%' + : '56.25%' iframe.style.position = 'absolute' iframe.style.inset = '0'