Manage videos using CSS

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:

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%;

}