YouTube Embedded Video

Industries

  • Music & Instruments
  • Toys & Games

Wireframe

Brand Logo

Coding Instructions

If you haven't already, create a custom product field to store the Youtube video ID on each product. In this example, [@misc1@] is used to store just the code for the video.

Populate this field individually per product, via the API, or using the complex import tool. To share the link for this video (https://youtu.be/xlcywgEMuGI), we store the last string of the URL, xlcywgEMuGI, in the misc1 field of products in Neto.

This allows the iframe to load the responsive classes, and make the data more versatile when it comes to supporting other video players or pop-up video players.

[%if [@misc1@]%]
    <div class="embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/[@misc1@]"></iframe>
    </div>
[%/if%]

Was this article useful?

Be notified when this page is updated. Optional.