Replace spinning play button with static button

  • Resolved jtm12

    (@jtm12)


    4 years, 1 month ago

    After updating this plugin, I noticed that the play button over my videos changed from a static play button to a spinning play button.

    I would like to go back to a static button.

    I see that the button has a class of vjs-big-play-button.

    Would the old button still exist in the plugin, allowing me to use it, or do I need to create my own play button icon?

    And what is the best option for overriding the spinning one?

    Thank you.

    The page I need help with: [log in to see the link]

Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Contributor wpvideogallery

    (@wpvideogallery)

    Kindly try adding the following PHP code to the bottom of your theme’s functions.php file,

    function aiovg_custom_player_css() {
    echo '<style type="text/css">#player:hover .vjs-big-play-button, #player:focus .vjs-big-play-button { transform: none !important; }</style>';
}
add_action( 'aiovg_player_head', 'aiovg_custom_player_css' );

    This should remove the spinning effect.

    Thread Starter jtm12

    (@jtm12)

    As always, thank you for the excellent help. That worked perfectly.

    For anyone who wants to put it back the way it was:

    function aiovg_custom_player_css() {
    echo '<style type="text/css">
            #player .vjs-big-play-button {
                border-radius: 50%;
                background: unset;
                background-color: rgba(43,51,63,.7);
                width: 80px;
                height: 80px;
                margin-top: -40px;
                margin-left: -40px;
                transition: all .4s;
            }
            #player .vjs-big-play-button .vjs-icon-placeholder {
                display: block;
            }
            #player .vjs-big-play-button .vjs-icon-placeholder:before {
                content: "\f101";
                font-family: VideoJS;
                font-weight: 400;
                font-style: normal;
                text-align: center;
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                font-size: 1.7em;
                line-height: 1.6em;
            }
            #player:hover .vjs-big-play-button,
            #player:focus .vjs-big-play-button {
                transform: none !important;
                background: rgba(115,133,159,.5);
            }
        </style>';
}
add_action( 'aiovg_player_head', 'aiovg_custom_player_css' );
Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Replace spinning play button with static button’ is closed to new replies.