Manage videos using css - On Premises 6.4

Magellan

To select a video, specify a paragraph style for videos (e.g. video) in Author-it and apply the style to the paragraph containing the video file object. This style name is included in the output files so can be used to identify the video. You can also specify the video container size and maximum width of the video display.

To manage videos using css:

  1. In Author-it, add the video file object to a topic and apply the unique `video` style created solely for this purpose.

    This ensures the `video` property is included in the table css class, and can be used to find the relevant tables.

    Note: No special definition is required for this video style.

  2. Open the contentstyles.css file in your theme folder.

    If this is the first video customization, to keep the file well organized add a videos section using comments in a similar way to the sections already in the file.

  3. On separate lines add: /*#region VIDEOS */ and /*#endregion VIDEOS */.
  4. Within the VIDEOS section, add the paragraph selector naming the unique style you have created in Author-it for videos.

    .p.video

    This selector chooses the container of the video.

  5. You can add code to make the container look nice with borders and shading, but the main thing here is to add:

    width: calc(100% - 20px);

    max-width: 700px;

    height: 100%;

    }

    This sets the width of the container to 20px smaller than the width of the window (so you have some margins). It also sets a maximum width for the video (700px) and it makes sure that the video height is not distorted.

  6. Add further definitions to adjust the video size within this container. For example:

    Requirement

    Definition Example

    Resize videos to fit the container

    .video video {

    width: 100%;

    height: 100%;

    }

    This selects videos within a video style container and sets them to 100% fill the container.

    For iframe videos to fit the container.

    For this type of video you need a second wrapper and then force the iframe to 100% fill the container

    .video .video-iframe {

    display: block;

    position: relative;

    padding-top: calc(56% + 5px);

    }

    The selector selects an iframe type video in a video style container and sets the position of the video in the container.

    .video .video-iframe iframe {

    position: absolute;

    top: 0;

    left: 0;

    width: 100%;

    height: 100%;

    }

    This fits the iframe to 100% fill the container.

The full definition is:

.p.video

width: calc(100% - 20px);

max-width: 700px;

height: 100%;

}

.video video {

width: 100%;

height: 100%;

}

.video .video-iframe {

display: block;

position: relative;

padding-top: calc(56% + 5px);

}

.video .video-iframe iframe {

position: absolute;

top: 0;

left: 0;

width: 100%;

height: 100%;

}