Video on Product Page Wrapped in Line with Text

Store Design
1

I have product videos loaded in the product descriptions of the product page (how many times can you say product in one sentence?:wink:).

I’d like to have this in line with the text of the product description, similarly to have you can edit a picture in the description to have the text wrap around it.

Any guidance for the appropriate code would be most appreciated.

Here’s an example page: Equiline Belair Air Vest – Ride EquiSafe

2

Thanks for sharing the store url of the product page. But unfortunatley I didn’t see the videos in the Product Description.

Could you please add the videos in the product Description, then I’ll provie you the solution code.

Thanks

3

The video is indeed in the product description. https://www.rideequisafe.com/products/equiline-belair-air-vest?_pos=3&_psq=Equiline+bel&_ss=e&_v=1.0

image0.png
image0.png147×320 37 KB

The Ride EquiSafe Team

4

@Ride_EquiSafe can you please share this specific product page link? above ones are going to different pages

5

Is it published yet? I am getting a 404

Screenshot 2025-12-21 at 7.51.40 PM
Screenshot 2025-12-21 at 7.51.40 PM833×614 61.3 KB

6

That’s very strange - it’s working for me? https://www.rideequisafe.com/products/equiline-belair-air-vest?_pos=2&_psq=Belair&_ss=e&_v=1.0

The Ride EquiSafe Team
919-404-9744

7

Hi,

Hope this will help

To make your product description video sit inline with text wrap video iframe in a div and float it like an image:

Edit your product description (HTML mode) and wrap your video like this:

<div class="video-float-left">
    <!-- your video iframe / media embed code here -->
</div>

Create a right aligned version if needed:

<div class="video-float-right">
    <!-- your video iframe / media embed code here -->
</div>

Add CSS

.video-float-left {
    float: left;
    margin: 0 15px 15px 0;
    max-width: 40%; /* adjust as you need */
}

.video-float-right {
    float: right;
    margin: 0 0 15px 15px;
    max-width: 40%; /* adjust as you need */
}

.video-float-left iframe,
.video-float-right iframe,
.video-float-left video,
.video-float-right video {
    width: 100%;
    height: auto;
}

Add a mobile override so it stacks nicely.