# Centering a video embed

**URL:** <https://community.hubspot.com/t/centering-a-video-embed/100392>\
**Category:** CMS Development\
**Tags:** professional\
**Created:** [February 17, 2024, 3:45pm UTC](https://community.hubspot.com/t/centering-a-video-embed/100392 "2024-02-17T15:45:51Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [February 17, 2024, 3:45pm UTC](https://community.hubspot.com/t/centering-a-video-embed/100392/1 "2024-02-17T15:45:51Z")

</div>

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:

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

Any advice is appreciated.

Scott

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 18, 2024, 2:40am UTC](https://community.hubspot.com/t/centering-a-video-embed/100392/2 "2024-02-18T02:40:10Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![SlimSr2003](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/slimsr2003/32/73373_2.png) [@SlimSr2003](https://community.hubspot.com/u/SlimSr2003)\
**Post date:** [February 18, 2024, 5:02pm UTC](https://community.hubspot.com/t/centering-a-video-embed/100392/3 "2024-02-18T17:02:26Z")

</div>

Hi Jennifer,

Thanks for taking the time. Here is a staged page: [https://jonestheagency-com.sandbox.hs-sites.com/marcome\_mode\_test](https://jonestheagency-com.sandbox.hs-sites.com/marcome_mode_test) let me know if you can’t access this.

---

<div class="post-metadata">

**Author:** ![jnix284](https://d10pqhm3lwygmk.cloudfront.net/user_avatar/community.hubspot.com/jnix284/32/29_2.png) [@jnix284](https://community.hubspot.com/u/jnix284)\
**Post date:** [February 18, 2024, 5:51pm UTC](https://community.hubspot.com/t/centering-a-video-embed/100392/4 "2024-02-18T17:51:53Z")

</div>

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](https://css-tricks.com/snippets/css/a-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.