All Collections
Nexternal
Products
Nexternal: Make your Embedded Videos "Fluid" on Mobile Devices
Nexternal: Make your Embedded Videos "Fluid" on Mobile Devices

Ensure that the width of your embedded videos adjust/respond to the screen size of the user’s mobile devices

Pamela Topper avatar
Written by Pamela Topper
Updated over a week ago

Product: Nexternal

To initially embed a YouTube video into a product description, refer to this article.

To make your embedded videos "fluid" on mobile devices (meaning: the width of video adjusts/responds to the screen size of the user’s device) on mobile devices, follow these steps:

1. Wrap your video snippet in <div class=”video-container”></div> or, in a Nexternal store, add the following script to the Mobile Head Addendum field inside the Mobile Layout section:

<script> nextQuery(document).ready(function() {nextQuery(‘.nextProductDetailsTable object, .nextProductDetailsTable embed, .nextProductDetailsTable iframe’).wrap(‘<div class=”video-container”></div>’);});</script>

2. Then add this set of CSS code to your Mobile Style Sheet Addendum also inside the Mobile Layout section:

.video-container {

position: relative;

padding-bottom: 56.25%;

padding-top: 30px;

height: 0;

overflow: hidden;

margin-top:30px;

}

.video-container iframe, .video-container object, .video-container embed {

position:absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}

rev: 10/13/20

Did this answer your question?