Adding videos to your product details page can help users better understand the product they are viewing. 

How To Add A YouTube or Vimeo Videos To Product Details Pages

1. Learn how to obtain your YouTube or Vimeo URLs using the below tutorial

2. Choose a UDF product header  or another open field like Notes, to insert the product's YouTube or Viemo URL in the respective field for that product...in this example, we will use UDF3 

3. Locate Product Settings by logging into Juniper Web Admin, on the left hand side you will notice "Settings". Add the following code snippet to Product Details layout for authenticated and or unauthenticated users...adjust the UDF field as needed.

{{#udf3}}
<! -- If Viemo embed link or YouTube embed link is inserted into UDF3 then it will display on product details page --> 
<div class="product-video-container"> 
<iframe allowfullscreen class="responsive-iframe" src="{{udf3}}"></iframe>
</div>
{{/udf3}}

4. Add the following CSS to JuniperWeb at a site level, this will help the video respond to tablet and mobile devices.  Under Settings > Site Configuration > on the right hand side you will notice Appearance. Under Appearance notice CSS JS icons, click Edit . Within the pop up, insert this CSS, click Add and then Save

 /*Start of Product Details YouTube / Viemo Embed */    
.product-video-container {
  position: relative;
  width: 100%;
  overflow: hidden;
  padding-top: 56.25%; /* 16:9 Aspect Ratio */
}

.responsive-iframe {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  height: 100%;
  border: none;
}

 /*End of Product Details YouTube / Viemo Embed */ 

5. Refresh you JuniperWeb site and you should now see these videos populate. Please note, you may need to clear cache by going to www.YourWebsite.com/clear 

How To Get The Proper YouTube & Vimeo URL 

For YouTube videos..

1. Goto YouTube, right click on the video, click "Copy Embed Code"

2. Paste the embed code somewhere that you can then copy the URL from that embed code.

3. Take the copied URL and follow step 2 in the above tutorial. 

Example: 

<iframe width="1280" height="720" src="https://www.youtube.com/embed/lM02vNMRRB0" 
frameborder="0" allow="accelerometer; autoplay; clipboard-write; 
encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

For Vimeo videos...

1. Goto Vimeo video, click "Share"

2. Paste the embed code somewhere that you can then copy the URL from that embed code.

3. Take the copied URL and follow step 2 in the above tutorial. 

<iframe src="https://player.vimeo.com/video/459803240?title=0&byline=0&portrait=0&badge=0" width="640" height="385" frameborder="0" allow="autoplay; fullscreen" allowfullscreen>
</iframe>
<p><a href="https://vimeo.com/459803240">Earth Crisis</a> from <a href="https://vimeo.com/encycl">Encyclopedia Pictura</a> on <a href="https://vimeo.com">Vimeo</a>.</p>