prototype(Jonnitto.PrettyEmbedYoutube:Component.Youtube) < prototype(Neos.Fusion:Component) {
configuration = ${Configuration.setting('Jonnitto.PrettyEmbedYoutube')}
live = true
videoID = ${null}
videoID.@process.trim = ${Type.isString(value) ? String.trim(value) : value}
type = ${this.configuration.defaults.type}
lightbox = ${this.configuration.defaults.lightbox}
preserveAspectRatio = ${this.configuration.defaults.preserveAspectRatio}
allowFullScreen = ${this.configuration.defaults.allowFullScreen}
controls = ${this.configuration.defaults.controls}
loop = ${this.configuration.defaults.loop}
closedCaptions = ${this.configuration.defaults.closedCaptions}
showRelated = ${this.configuration.defaults.showRelated}
playsinline = ${this.configuration.defaults.playsinline}
enableJsApi = ${this.configuration.enableJsApi}
enableGdprMessage = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.enableGdprMessage')}
gdprMessage = Jonnitto.PrettyEmbedHelper:GdprMessage
gdprMessageAccept = Jonnitto.PrettyEmbedHelper:GdprMessageAccept
gdprMessageNewWindow = Jonnitto.PrettyEmbedHelper:GdprMessageNewWindow
# Pass a ratio like this: ${16 / 9}
ratio = ${null}
ratio.@process.calculatePaddingTop = ${Jonnitto.PrettyEmbedHelper.paddingTop(value)}
// If true, this get only a value if ratio is not set
force16to9 = false
force16to9.@process.calculatePaddingTop = ${!this.ratio && value ? Jonnitto.PrettyEmbedHelper.paddingTop(16 / 9) : false}
wrapper = ${Configuration.setting('Jonnitto.PrettyEmbedHelper.wrapper')}
id = ${null}
poster = ${null}
poster2x = ${null}
alternativeText = ${null}
origin = ${null}
playButton = Jonnitto.PrettyEmbedHelper:Button.Play
// Internal
look = ${this.lightbox ? 'lightbox' : 'inline'}
url = ${this.configuration.url[this.type]}
guessedPoster = ${this.type == 'video' ? '//i.ytimg.com/vi/' + this.videoID + '/maxresdefault.jpg' : null}
previewImageClass = ${this.poster ? null : 'jonnitto-prettyembed__youtube-preview'}
hasRatioAndNoLightboxWithPreserveAspectRatio = ${this.lightbox && this.preserveAspectRatio ? false : !!this.ratio}
forceRatio = ${this.ratio || this.force16to9}
@if.hasVideoID = ${this.videoID && (this.poster || this.guessedPoster)}
renderer = Neos.Fusion:Tag {
tagName = ${props.live ? 'a' : 'div'}
attributes {
id = ${props.id}
class = Carbon.Eel:BEM {
block = 'jonnitto-prettyembed'
modifier = Neos.Fusion:DataStructure {
youtube = true
iframe = true
ratio = ${!!props.force16to9 || !!props.hasRatioAndNoLightboxWithPreserveAspectRatio}
look = ${props.look}
}
}
href = ${String.replace(props.url.href, '%id%', props.videoID)}
rel = 'noopener'
target = '_blank'
style = ${props.force16to9 || props.hasRatioAndNoLightboxWithPreserveAspectRatio ? 'padding-top:' + props.forceRatio : null}
data-gdpr = ${props.enableGdprMessage && props.gdprMessage ? props.gdprMessage : null}
data-gdpr-accept = ${props.enableGdprMessage && props.gdprMessageAccept ? props.gdprMessageAccept : null}
data-gdpr-new-window = ${props.enableGdprMessage && props.gdprMessageNewWindow ? props.gdprMessageNewWindow : null}
data-ratio = ${props.forceRatio || null}
data-fs = ${!!props.allowFullScreen}
data-embed = Neos.Fusion:Join {
src = ${String.replace(props.url.embed, '%id%', props.videoID)}
connect = ${String.indexOf(props.url.embed, '?') == -1 ? '?' : '&'}
autoplay = 'autoplay=1'
modestbranding = '&modestbranding=1'
enableJsApi = ${props.enableJsApi ? '&enablejsapi=1' : ''}
playsinline = ${'&playsinline=' + (props.playsinline ? '1' : '0')}
controls = ${props.controls ? '' : '&controls=0'}
loop = ${props.loop ? '&loop=1' : ''}
closedCaptions = ${props.closedCaptions ? '&cc_load_policy=1' : ''}
showRelated = ${props.showRelated ? '&rel=1' : '&rel=0'}
fullscreen = ${props.allowFullScreen ? '' : '&fs=0'}
origin = ${props.origin ? '&origin=' + props.origin : ''}
}
}
content = afx`
{props.playButton}
`
@process {
assets = afx`
{value}
`
wrapper = Jonnitto.PrettyEmbedHelper:Wrapper {
wrapper = ${props.wrapper}
}
}
}
}