The article has an image and a text block with heading, styled spans, text and an optional link.
When the optional lightbox image function is used the spyglass icon appears at the top right of the image.
Lightbox
The lightbox image is inserted in two sizes and has a caption and close tab.
All the image can be lazy loaded.
Most video players aren't suitable for responsive web pages. The MP4 video file needs to be inserted in two sizes and have a lazy loading function to prevent it from slowing the page load and time to be interactive (TTI) which should be less than 2 seconds.
SEO
A video needs a description for the visitors and the search engines - just like an image. Using a lightbox launched from an article provides more info and reduces the onload content.
Hosting
Using self hosted MP4 is way better than using hosted video like Vimeo, Wistia or YouTube. If hosted video is used it must be launched in a lightbox and have a lazy loading function to give reasonable performance on mobile devices.
The image is the action tab to open the video in an overlay with options for a border, bottom box shadow and adjustable overlay background color and opacity.
Video
The MP4 video file is inserted in two sizes and has a lazy load function to prevent it from slowing the page download and TTI (time to interactive) times which should be less than 2 seconds.
If a YouTube video player must be used it should be offscreen at page load and open in a lazy loaded lightbox for best results on mobile devices.
InteractiveMenu