[Resolved] Embed 2 youtube videos side by side

[GeneratePressUser]

Hello Team,

Pls can you tell how can we embed 2 youtube videos side by side.

See the link in private box.

[Leo]

Hi there,

You can use a grid block from GenerateBlocks to create columns and insert an YouTube embed block in each container:
https://docs.generateblocks.com/article/grid-overview/

You can also consider using the Columns block from WordPress core but it offers less options and controls for the columns.

Let me know if this helps 🙂

[GeneratePressUser]

Hello Leo,

We have disabled gutenberg and gutenberg is not available for woocommerce products.

Is there a manual code which can be used or any other way?

[Elvin]

Hi there,

We can do this with CSS like this –

div#tab-description {
    display: flex;
    justify-content: space-between;
}

But this is not an ideal solution as this will apply to all descriptions of products.

Can you edit the HTML structure of the videos in the description to wrap it with a div?

example:

<div class="video-desc-grid">
//video #1 here
//video #2 here
</div>

And then do this CSS instead

div#tab-description div.video-desc-grid {
    display: flex;
    justify-content: space-between;
}

[GeneratePressUser]

Hello Elvin,

Thanks a lot, wrapping them around div worked perfectly 😀

[GeneratePressUser]

Hello,

It seems on mobile they appear sticking together which looks weird, pls can you tell what can be done to make them look responsive.

[Leo]

You’d need to do something like this to make it responsive:
https://docs.generatepress.com/article/responsive-videos/

[GeneratePressUser]

Hello,

I guess I need to merge that with your given CSS, to get both responsiveness and also proper alignment.

[Elvin]

Yeah that’s about right.

Example:

<div class="video-desc-grid">
<div class="videoWrapper">
   // Your video embed code
</div>
<div class="videoWrapper">
   // Your video embed code
</div>
</div>

And its CSS:

div#tab-description div.video-desc-grid {
    display: flex;
    justify-content: space-between;
}

div#tab-description div.video-desc-grid .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	padding-top: 25px;
	height: 0;
}
div#tab-description div.video-desc-grid .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

[GeneratePressUser]

Hello,

I did that and it seems the videos disappeared, pls can u check.

[GeneratePressUser]

It seems the topic was marked resolved, actually after using the code videos disappeared, you can visit the page and see.

[Elvin]

Try this instead:

div#tab-description div.video-desc-grid {
    display: flex;
    justify-content: space-between;
}

div#tab-description div.video-desc-grid .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	margin-top: 25px;
	flex: 0 1 49%;
}

div#tab-description div.video-desc-grid .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 400px
}

Change the height value to your preference.

[GeneratePressUser]

That leaves a lot of space at bottom but on mobile it then looks weird, on mobile it should look 1 below the other, just on desktop it should be side by side.

[Ying]

You just need to add a media query to the CSS Elvin provided so it only applies on desktop:

@media (min-width: 769px) {
div#tab-description div.video-desc-grid {
    display: flex;
    justify-content: space-between;
}

div#tab-description div.video-desc-grid .videoWrapper {
	position: relative;
	padding-bottom: 56.25%; /* 16:9 */
	margin-top: 25px;
	flex: 0 1 49%;
}

div#tab-description div.video-desc-grid .videoWrapper iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%; 
	height: 400px
}
}

[GeneratePressUser]

Hey Ying,

Thanks a lot, it worked, I did some changes I made it <object> code instead of iframe, so I no longer had to use:

position: relative;
padding-bottom: 56.25%; /* 16:9 */
margin-top: 25px;

Now just 1 more thing, can you tell how can I reduce its height a bit?

[Author]

Posts