Skip to content

Instantly share code, notes, and snippets.

.plyr input[type=range]:focus,
.plyr:focus {
outline: 0
}
.plyr .plyr__video-embed iframe,
.plyr__tooltip {
pointer-events: none
}
/* Styles for Large Play Button in middle of the vid */
.plyr__play-large {
color: purple; /* can use this or svg play style at the bottom
of this stylesheet (it will overwrite this style) */
background-color: orange;
border: 4px dotted purple;
width:100px; /* Useful for covering up YouTube or Vimeo default
play buttons */
height:100px; /* Useful for covering up YouTube or Vimeo default
play buttons - make the same size as width for a perfect
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden;
position: fixed;
width: 100%;
}
html.pum-open.pum-open-overlay.pum-open-scrollable .pum-overlay.pum-active {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
}
html.pum-open.pum-open-overlay, html.pum-open.pum-open-overlay.pum-open-fixed .pum-overlay {
overflow: hidden!important;
}
<?php
add_action( 'wp_footer', 'my_custom_popup_scripts', 500 );
function my_custom_popup_scripts() { ?>
<script type="text/javascript">
(function ($, document, undefined) {
jQuery('.pum').on('pumAfterOpen', function () {
jQuery(window).trigger('resize');
jQuery(‘body’).on(‘click’, ‘.pum-trigger’, function() {
jQuery(‘.pum-container’).trigger(‘resize’);
});
<div style="width:400px;height:300px;"> [your_slider_shortcode] </div>