Product: Nexternal

Article Link: http://help.truecommerce.com/en/articles/4534580-nexternal-make-your-videos-fluid-on-mobile-devices

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