From 6782737009bec028b393dbfb8c9897cd0c6df48f Mon Sep 17 00:00:00 2001 From: Sam Potts Date: Mon, 14 Jan 2019 00:33:48 +1100 Subject: Fullscreen fixes --- src/js/utils/style.js | 40 ++++++++++++++++++++++++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 src/js/utils/style.js (limited to 'src/js/utils/style.js') diff --git a/src/js/utils/style.js b/src/js/utils/style.js new file mode 100644 index 00000000..a8eb393b --- /dev/null +++ b/src/js/utils/style.js @@ -0,0 +1,40 @@ +// ========================================================================== +// Style utils +// ========================================================================== + +import is from './is'; + +/* function reduceAspectRatio(width, height) { + const getRatio = (w, h) => (h === 0 ? w : getRatio(h, w % h)); + const ratio = getRatio(width, height); + return `${width / ratio}:${height / ratio}`; +} */ + +// Set aspect ratio for responsive container +export function setAspectRatio(input) { + let ratio = input; + + if (!is.string(ratio) && !is.nullOrUndefined(this.embed)) { + ({ ratio } = this.embed); + } + + if (!is.string(ratio)) { + ({ ratio } = this.config); + } + + const [x, y] = ratio.split(':').map(Number); + const padding = (100 / x) * y; + + this.elements.wrapper.style.paddingBottom = `${padding}%`; + + // For Vimeo we have an extra
to hide the standard controls and UI + if (this.isVimeo && this.supported.ui) { + const height = 240; + const offset = (height - padding) / (height / 50); + this.media.style.transform = `translateY(-${offset}%)`; + } + + return { padding, ratio }; +} + +export default { setAspectRatio }; -- cgit v1.2.3