I’m trying to add padding to a Video Background section (Prestige theme) on our site’s homepage and I’m struggling to figure out where exactly to configure this.
Basically, the desktop view is great, but I’d like to edit the mobile view, because the heading text disappears in this view, and the margin/padding on the bottom disappears, leaving a silly looking lack of a gap.
So I thought "surely this is taken care of with JavaScript (since I saw nothing that related to conditional rendering in the respective section .liquid file). But I can’t seem to locate anything to do with the heading text, nor can I determine what the object is that I should add the padding to and where the if statement is that dictates whether the text appears or not.
I’m aware that this could be a CSS issue, and that the heading is present but not appearing because of some responsiveness bug, but I’m not clear and I’d very much appreciate some guidance.
The below code is the module for the BackgroundVideoSection.
var BackgroundVideoSection = function () {
function BackgroundVideoSection(container) {
_classCallCheck(this, BackgroundVideoSection);
this.element = container;
this.options = JSON.parse(this.element.getAttribute('data-section-settings'));
this._loadScript().then(this._setupPlayer.bind(this));
}
_createClass(BackgroundVideoSection, [{
key: '_loadScript',
value: function _loadScript() {
var _this27 = this;
return new Promise(function (resolve, reject) {
var script = document.createElement('script');
document.body.appendChild(script);
script.onload = resolve;
script.onerror = reject;
script.async = true;
script.src=_this27.options['videoType'] === 'youtube' ? '//www.youtube.com/iframe_api' : '//player.vimeo.com/api/player.js';
});
}
}, {
key: 'onUnload',
value: function onUnload() {
if (this.player) {
this.player.destroy(); // Both YouTube and Vimeo use the same function name
}
}
}, {
key: '_setupPlayer',
value: function _setupPlayer() {
var _this28 = this;
var elementToInsert = this.element.querySelector('.ImageHero__VideoHolder');
var playerLoadingInterval = setInterval(function () {
if (_this28.options['videoType'] === 'youtube') {
if (window.YT) {
_this28.player = new YT.Player(elementToInsert, {
videoId: _this28.options['videoId'],
playerVars: {
showinfo: 0,
controls: 0,
fs: 0,
rel: 0,
height: '100%',
width: '100%',
iv_load_policy: 3,
html5: 1,
loop: 1,
playsinline: 1,
modestbranding: 1,
disablekb: 1,
origin: _this28.options['requestHost']
},
events: {
onReady: _this28._onYouTubeReady.bind(_this28),
onStateChange: _this28._onYouTubeStateChange.bind(_this28)
}
});
clearInterval(playerLoadingInterval);
}
} else {
if (window.Vimeo) {
_this28.player = new Vimeo.Player(elementToInsert.parentNode, {
id: _this28.options['videoId'],
autoplay: true,
muted: true,
background: true,
/*height: '100%',
width: '100%',*/
loop: true
});
}
}
}, 50);
}
}, {
key: '_onYouTubeReady',
value: function _onYouTubeReady(event) {
this.player.mute();
this.player.playVideo();
}
}, {
key: '_onYouTubeStateChange',
value: function _onYouTubeStateChange(event) {
if (event.data === YT.PlayerState.ENDED) {
this.player.playVideo();
}
}
}]);
return BackgroundVideoSection;
}();
/* harmony export (immutable) */
__webpack_exports__["default"] = BackgroundVideoSection;
/***/
},
