Working with Videos in Responsive Design

Most of the videos we are asked to add to a client's site will more than likely come in an iframe, which we included instructions for below. If you run across a video that is not in an iframe, check out this Fluid Width Video article for more tips. (The information below came from this site as well.)

iFrame Videos (YouTube, Vimeo, etc.)

Due to the nature of SW Engine, we can't place the code directly on the page, as it will render whatever the code is meant to do. If you'd like to view the code for this module, visit the Google Docs version of these instructions.

  1. Create a new Video Module from a module template, being sure to uncheck the “Can Have Entities” box. If there is already a video module on the site, you can use the same module and simply add additional components within it.
  2. The component within the Video module template will be named “Name of Video,” so you can update that to reflect the video you are adding. Then click on the Source code tab and you will see a line for the iframe code. Simply replace that line with the iframe code you have and click Save Changes. Place the module on the page like any other.

CSS
The CSS will be directly in the component, but if you need it again here it is. This will make the video take up the full width of it’s parent element, so keep that in mind.

Multiple Videos
If you have more than one video on a site, they can all go within one video module, and then add each video as its own component. Simply copy and paste the source code from the original component into any additional components, and you’ll be good to go.

Responsive Video List

If at any time you have a number of videos and need to list them all within the same player, we have this great video list option.

  1. Start by uploading your videos to Vimeo, following the normal procedure we use.
  2. While that is uploading, create a new module in SWE using the Video List Player module template, and add it to the page.
  3. When your video is ready, go the module and add a new entity.
    • Video Title: Enter the title of the video.
    • Video Description: Enter a short description, if applicable. This will show just under the title, and actually disappears at smaller viewports.
    • Video Link: In Vimeo, make sure you are on the screen where your video is displayed at the top. Click on the envelope icon and grab the web address in the Link section. It should just be https://vimeo.com/VIDEONUMBER. If there is additional code between vimeo.com/ and the video number, delete that out. For example, you should only have something short like https://vimeo.com/156732975.
    • Thumbnail URL: From the same screen your video is displayed on in Vimeo, right-click and view the page source. You will find the line for og:image and there will either be a link for a jpg or a webp (if you are in Chrome.) Highlight and copy just the information inside of the quotation marks, for example: https://i.vimeocdn.com/video/557829901_1280x588.webp. Paste that into the entity field, making sure to change the .webp extension to .jpg.
  4. There is some basic styling in the source of the module itself. You are welcome to tweak it there, if needed.