></my-peertube-checkbox>
</div>
- <div class="form-group">
- <my-peertube-checkbox
- *ngIf="isInPlaylistEmbedTab()"
- inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
- i18n-labelText labelText="Only display embed URL"
- ></my-peertube-checkbox>
- </div>
+ <ng-container *ngIf="isInPlaylistEmbedTab()">
+ <div class="form-group">
+ <my-peertube-checkbox
+ inputName="onlyEmbedUrl" [(ngModel)]="customizations.onlyEmbedUrl"
+ i18n-labelText labelText="Only display embed URL"
+ ></my-peertube-checkbox>
+ </div>
+
+ <div class="form-group">
+ <my-peertube-checkbox
+ inputName="responsive" [(ngModel)]="customizations.responsive"
+ i18n-labelText labelText="Responsive embed"
+ ></my-peertube-checkbox>
+ </div>
+ </ng-container>
<my-plugin-placeholder pluginId="share-modal-playlist-settings"></my-plugin-placeholder>
</div>
</div>
<ng-container *ngIf="isInVideoEmbedTab()">
+ <div class="form-group">
+ <my-peertube-checkbox
+ inputName="responsive" [(ngModel)]="customizations.responsive"
+ i18n-labelText labelText="Responsive embed"
+ ></my-peertube-checkbox>
+ </div>
+
<div class="form-group">
<my-peertube-checkbox
inputName="title" [(ngModel)]="customizations.title"
warningTitle: boolean
controlBar: boolean
peertubeLink: boolean
+ responsive: boolean
includeVideoInPlaylist: boolean
}
warningTitle: true,
controlBar: true,
peertubeLink: true,
+ responsive: false,
includeVideoInPlaylist: false
}, {
)
}
- async getVideoIframeCode () {
+ async getVideoEmbedCode (options: { responsive: boolean }) {
+ const { responsive } = options
return this.hooks.wrapFun(
buildVideoOrPlaylistEmbed,
- { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name },
+ { embedUrl: await this.getVideoEmbedUrl(), embedTitle: this.video.name, responsive },
'video-watch',
'filter:share.video-embed-code.build.params',
'filter:share.video-embed-code.build.result'
)
}
- async getPlaylistEmbedCode () {
+ async getPlaylistEmbedCode (options: { responsive: boolean }) {
+ const { responsive } = options
return this.hooks.wrapFun(
buildVideoOrPlaylistEmbed,
- { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName },
+ { embedUrl: await this.getPlaylistEmbedUrl(), embedTitle: this.playlist.displayName, responsive },
'video-watch',
'filter:share.video-playlist-embed-code.build.params',
'filter:share.video-playlist-embed-code.build.result'
if (this.playlist) {
this.playlistUrl = await this.getPlaylistUrl()
this.playlistEmbedUrl = await this.getPlaylistEmbedUrl()
- this.playlistEmbedHTML = await this.getPlaylistEmbedCode()
- this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.playlistEmbedHTML)
+ this.playlistEmbedHTML = await this.getPlaylistEmbedCode({ responsive: this.customizations.responsive })
+ this.playlistEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getPlaylistEmbedCode({ responsive: false }))
}
if (this.video) {
this.videoUrl = await this.getVideoUrl()
this.videoEmbedUrl = await this.getVideoEmbedUrl()
- this.videoEmbedHTML = await this.getVideoIframeCode()
- this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(this.videoEmbedHTML)
+ this.videoEmbedHTML = await this.getVideoEmbedCode({ responsive: this.customizations.responsive })
+ this.videoEmbedSafeHTML = this.sanitizer.bypassSecurityTrustHtml(await this.getVideoEmbedCode({ responsive: false }))
}
}
function buildVideoOrPlaylistEmbed (options: {
embedUrl: string
embedTitle: string
+ responsive?: boolean
}) {
- const { embedUrl, embedTitle } = options
+ const { embedUrl, embedTitle, responsive = false } = options
const iframe = document.createElement('iframe')
iframe.title = embedTitle
- iframe.width = '560'
- iframe.height = '315'
+ iframe.width = responsive ? '100%' : '560'
+ iframe.height = responsive ? '100%' : '315'
iframe.src = embedUrl
iframe.frameBorder = '0'
iframe.allowFullscreen = true
iframe.sandbox.add('allow-same-origin', 'allow-scripts', 'allow-popups')
+ if (responsive) {
+ const wrapper = document.createElement('div')
+
+ wrapper.style.position = 'relative'
+ wrapper.style['padding-top'] = '56.25%'
+
+ iframe.style.position = 'absolute'
+ iframe.style.inset = '0'
+
+ wrapper.appendChild(iframe)
+
+ return wrapper.outerHTML
+ }
+
return iframe.outerHTML
}