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
}