Hi All,
I am working to create a module that has a rich text section on the left and a embeded video on the right.
Here is the HTML for the embed video section:
<div class=“JTA-player-right”>
{% if module.podcast_embed_code.source_type == “oembed” %}
{% set oembedResponse = module.podcast_embed_code.oembed_response %}
<div class=“oembed_container {% if module.podcast_embed_code.size_type == ‘auto_full_width’ %} oembed_container–full-size{% endif %}” id=“oembed_container-{{name}}”>
<div class=“iframe_wrapper”
data-embed-response-html=“{{ oembedResponse.html|escape }}”
data-embed-response-width=“{{ oembedResponse.width }}”
data-embed-response-height=“{{ oembedResponse.height }}”
data-embed-url=“{{ module.podcast_embed_code.oembed_url }}”
{% unless module.podcast_embed_code.size_type == “auto_full_width” || module.podcast_embed_code.size_type == “exact” %}
data-max-height=“{% if module.podcast_embed_code.size_type == “auto_custom_max” %}{{ module.podcast_embed_code.max_height }}{% endif %}”
data-max-width=“{% if module.podcast_embed_code.size_type == “auto_custom_max” %}{{ module.podcast_embed_code.max_width }}{% endif %}”
{% endunless %}
{% if module.podcast_embed_code.size_type == “exact” %}
data-height=“{{ module.podcast_embed_code.height }}”
data-width=“{{ module.podcast_embed_code.width }}”
{% endif %}
>
</div>
</div>
{% require_css %}
<style>
.oembed_container {
display: inline-block;
height: 100%;
position: relative;
width: 100%;
}
.oembed_container .iframe_wrapper > * {
height: 100%;
left: 0;
margin: 0 auto;
position: absolute;
right: 0;
top: 0;
width: 100%;
}
.iframe_wrapper {
height: 0;
padding-bottom: 56.25%;
padding-top: 25px;
position: relative;
}
</style>
{% end_require_css %}
{% require_js %}
<script>
function loadEmbedField(oembedContainer) {
const iframeWrapper = oembedContainer.querySelector(‘.iframe_wrapper’);
if (!iframeWrapper) {
return;
}
const url = iframeWrapper.dataset.embedUrl;
if (!url) {
return;
}
function setIframe(data) {
let {
maxHeight,
maxWidth,
height,
width,
} = iframeWrapper.dataset;
maxHeight = maxHeight !== undefined && !maxHeight ? data.height : maxHeight;
maxWidth = maxWidth !== undefined && !maxWidth ? data.width : maxWidth;
height = height !== undefined && !height ? data.height : height;
width = width !== undefined && !width ? data.width : width;
const el = document.createElement(‘div’);
el.innerHTML = data.html;
const iframe = el.firstChild;
iframeWrapper.appendChild(iframe);
if (maxHeight) {
const maxHeightStr = maxHeight.toString(10) + “px”;
oembedContainer.style.maxHeight = maxHeightStr;
iframe.style.maxHeight = maxHeightStr;
}
if (maxWidth) {
const maxWidthStr = maxWidth.toString(10) + “px”;
oembedContainer.style.maxWidth = maxWidthStr;
iframe.style.maxWidth = maxWidthStr;
}
if (height) {
const heightStr = height.toString(10) + “px”;
oembedContainer.style.height = heightStr;
iframe.style.height = heightStr;
}
if (width) {
const widthStr = width.toString(10) + “px”;
oembedContainer.style.width = widthStr;
iframe.style.width = widthStr;
}
}
const embedResponse = {
html: iframeWrapper.dataset.embedResponseHtml,
width: iframeWrapper.dataset.embedResponseWidth,
height: iframeWrapper.dataset.embedResponseHeight
};
if (embedResponse.html) {
setIframe(embedResponse);
return;
}
const request = new XMLHttpRequest();
const requestUrl = “/_hcms/oembed?url=” + encodeURIComponent(url) + “&autoplay=0”;
request.open(‘GET’, requestUrl, true);
request.onload = function() {
if (request.status >= 200 && request.status < 400) {
const data = JSON.parse(request.responseText);
setIframe(data);
} else {
console.error(‘Server reached, error retrieving results.’);
}
};
request.onerror = function() {
console.error(‘Could not reach the server.’);
};
request.send();
}
document.addEventListener(‘DOMContentLoaded’, function() {
var oEmbedContainers = document.getElementsByClassName(‘oembed_container’);
Array.prototype.forEach.call(oEmbedContainers, loadEmbedField)
});
</script>
{% end_require_js %}
{% else %}
<div id=“embed_container” class=“embed_container”>
<div class=“iframe_wrapper”>
{{ module.podcast_embed_code.embed_html }}
</div>
</div>
{% require_css %}
<style>
.iframe_wrapper {
height: 0;
padding-bottom: 56.25%;
padding-top: 25px;
position: relative;
}
.embed_container {
display: inline-block;
height: 100%;
position: relative;
width: 100%;
}
.embed_container iframe {
left: 0;
max-height: 100%;
max-width: 100%;
position: absolute;
right: 0;
top: 0;
}
</style>
{% end_require_css %}
{% endif %}
</div>
Here is the CSS for the section:
.JTA-player-right {
display:flex;
justify-content: center;
width: 50%;
height: 315px;
}
I’m thinking it has somethign to do that in my CSS I am using display: flext and the HTML code is using positioning.
This page has the module in the 2nd section if that helps:
Any advice is appreciated.
Scott