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-vimeo or 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… 📺
Vimeo example: <div data-molly-video-vimeo="87530837">Click me to watch this Vimeo video</div>
Youtube example: <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 .theaterIsOpen.>.mollyTheaterCtn: This class which controls the full screen background and is the first of the dynamically added classes. Default background color is #090909.>>.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 height: 0; and padding-bottom: 56.25%;. Has a background of #000000.>>>>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 :before and :after pseudo elements make up the X. This is nested within .mollyTheaterCtn.When the Theater is open, <body> has a class of .theaterIsOpen.
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 .mollyTheater.custom {…}.
Advanced Custom Fields (Pro) can be used very effectively to dynamically place the Vimeo and Youtube IDs.