Centering a video embed

SlimSr2003 — Sat, 17 Feb 2024 15:45:51 GMT

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;
}

.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:

https://jonestheagency-com.sandbox.hs-sites.com/-temporary-slug-01fe0d8f-ea37-45c0-92be-327b7bb4c434?hs_preview=dwUYAitR-145658581562&

Any advice is appreciated.

Scott

Re: Centering a video embed

Jnix284 — Sun, 18 Feb 2024 02:40:10 GMT

@SlimSr2003 happy to take a look, the link you shared requires HubSpot login though - can you publish to a live test page instead?

Re: Centering a video embed

SlimSr2003 — Sun, 18 Feb 2024 17:02:26 GMT

Hi Jennifer,

Thanks for taking the time. Here is a staged page: https://jonestheagency-com.sandbox.hs-sites.com/marcome_mode_test let me know if you can't access this.

Re: Centering a video embed

Jnix284 — Sun, 18 Feb 2024 17:51:53 GMT

Hi @SlimSr2003 so the biggest issue I see with using the Flex the way you have it, is that you are creating the left and right sides independently as separate flex areas, rather than creating a flex container and then establishing the flex-direction, flex-wrap, etc. which would then let you use justify-content: space-evenly

I've been working a lot lately on recoding some older CSS to use Flex and have found this guide to Flexbox to be the easiest to follow.

I'm not saying the way you have it (with separate left and right areas) can't be done (I've been working with HTML/CSS for over 20 years, never as a full-time developer though) - playing around with your CSS I can't get the right side to center without changing the HTML structure of the container.

While I love a good challenge, I don't wan to lead you down the wrong path - maybe @Anton can confirm what would work best to center the video on the right.

topic Centering a video embed in CMS Development

Centering a video embed

Re: Centering a video embed

Re: Centering a video embed

Re: Centering a video embed