A lightweight video player plugin for Vimeo or Youtube videos in a fullscreen player.
Activate plugin and add a data attribute of either
data-molly-video-youtube containing either the vimeo ID (a string of numbers, e.g. '87530837') or a Youtube ID (an alpha-numeric string, e.g. 'AajP933wMUo').
When the element with the data attribute is clicked, a full-screen video will appear. Happy viewing… 📺
<div data-molly-video-vimeo="87530837">Click me to watch this Vimeo video</div>
<div data-molly-video-youtube="AajP933wMUo">Click me to watch this Youtube video</div>
The following are the class names used brief descriptions:
#mollyPluginTheater.mollyPluginTheater: The master container lives in the footer statically and should not be altered in CSS otherwise it will cause issues in the footer. When the Theater is open, this has a class of
>.mollyTheaterCtn: This class which controls the full screen background and is the first of the dynamically added classes. Default background color is
>>.mollyTheaterSize: This centers the player both vertically and horizontally and controls the max-height of player. Edit with caution.
>>>.mollyTheater: This controls the aspect ratio (default is 16:19) of the player via
padding-bottom: 56.25%;. Has a background of
>>>>iframe.mollyTheaterIframe: The actual iframe of the embed. Is absoltuly positioned to fill size of
.mollyTheater. When the Theater is opened,
.mollyVideoCloseTheaterButton: The class for the close button which defaults to the top-left. The
:afterpseudo elements make up the X. This is nested within
When the Theater is open,
<body> has a class of
When writing custom CSS for the Theater, referencing the classes listed above, you can add the class
.custom to any of the above classes so that your changes cascade properly. For example: if modifying the
.mollyTheater class, in your CSS write it as
Advanced Custom Fields (Pro) can be used very effectively to dynamically place the Vimeo and Youtube IDs.