The Responsive Video snippet is used when displaying videos hosted on Youtube,  Vimeo and other 3rd party sources on your website. It helps with resizing the video embed to fit the various screens viewing the video itself.

How to use the snippet:

1. Once you have chosen a video from YouTube,  Vimeo or related 3rd party video hosting service and have obtained its Embed code, navigate to Content > Assets > Content Blocks in your CommerceCM manager and add a new Content Block. 

2. Name the Content Block the name of your selected video, for organizational benefit. 

3. Click the Edit Button for the content block to open its editor. 

4. Insert a Responsive Video snippet into the contents of the Content Block.  Doing so will write out a line of text "Video code goes here".  This line of text is being wrapped by a Division container.  In  HTML view,  you will be replacing this instructional text with the iframe embed code representing your video. 

5. Switch to HTML view using the bottom <> HTML view link in the Content Block editor.  You should see the following:

<div class="video">Video code goes here</div>

6. Select the instructional text and replace it with your video's iframe embed code, being careful not to disturb the encasing division elements wrapping the text itself.  The pasted end result should resemble the following:

<div class="video"><iframe width="560" height="315" src="https://www.(hosted).com/..... (remaining code..) ></iframe></div>

7. Close and update the Content Block.

8. Lastly,  insert the Content Block as a Drop-IN Application into any Column Grid snippet of your website pages to display the video.  The selected Column Grid snippet will determine the width of the video itself for desktop. Since column grid snippets resize themselves on mobile devices, your video will do the same!

Here is a Sample: