Molly Theater (Video Player)

A lightweight video player plugin for Vimeo or Youtube videos in a fullscreen player.

To use:

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>

Class names

The following are the class names used brief descriptions:

Body tag class name

When the Theater is open, <body> has a class of .theaterIsOpen.

CSS Specificity

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 {…}.

Custom Fields

Advanced Custom Fields (Pro) can be used very effectively to dynamically place the Vimeo and Youtube IDs.