I'm not sure if this is an issue with the WYSIWYG editor used by SmarterTools or if an oversight within SmarterTrack itself.  But the editor has a "Embed Media Content from Various Sites" button which works ok for embedding video content from YouTube / Vimeo / etc.

 

Within that tool there is a drop-down asking for resizing options, with "responsive resize" as an option.  Turns out that, at present, selecting that option does diddly-squat other than it wraps the iframe within a <div> container with a classname of "embeddedContent".

 

After searching all the CSS generated for the portal, turns out that there is no such class as "embeddedContent" defined anywhere.  So we decided to use the custom CSS feature available to define it:

 

.embeddedContent {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.embeddedContent iframe  {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

 

We're only concerned with Vimeo (and YouTube) so for us we just need to define for "iframe".  We'd suggest adding similar definitions for "object" and "embed" tags.

 

Example of this in action: http://support.mbsportsweb.ca/kb/a99/tryout-lists-training-videos.aspx (resize your browser to see all the videos expand / shrink).

 

Full credit for this idea goes here:

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php