How to customize JetPack VideoPress player UI

  • Resolved Bence Szalai

    (@grapestain)


    2 years, 4 months ago

    Hi!

    We are planing to use JetPack VideoPress to host video content for some of our articles in a new site. We would like to make adjustments to the player UI to ensure it fits the site perfectly.

    https://jetpack.com/support/video-hosting-classic-editor/#additional-information says:

    > Video preview elements and HTML5 video are directly inserted into your WordPress post or page, enabling custom styling through CSS

    However I saw an example page using VideoPress and when I inspected the code it looked like the video player was inserted as an iframe, which would prevent the application of the css rules of the embedding site to the player.

    Can someone clarify please if it is possible to fit the player UI to the theme of the site?

    • This topic was modified 2 years, 4 months ago by Bence Szalai.
Viewing 3 replies - 1 through 3 (of 3 total)
  • Plugin Support Bruce (a11n)

    (@bruceallen)

    Happiness Engineer

    Hi @grapestain

    Within the Video Block in the editor, the advanced tab lets you add a CSS class to your block, allowing you to write custom CSS and style the block as you see fit.

    Is that what you were looking for?

    Thread Starter Bence Szalai

    (@grapestain)

    Hi @bruceallen,

    Not sure, I think no. Our goal would be to customize the player UI, for example use CSS to change how the play button looks, how the volume icon looks ec. However whenever I looked at the source of VideoPress video on sites, I found that it really embeds an IFRAME, which means it would be impossible to apply CSS rules to the elements in the IFRAME, such as buttons and UI elements.
    So the question is this: Is it possible to either:
    a.) embed videos without an IFRAME, so the player becomes part of the DOM of the host page, so the same CSS rules would apply, or
    b.) inject custom CSS into the IFRAME, so the player UI could be customised?

    As said above, the documentation suggest that the UI can be customised, but it does not go into details.

    Plugin Support lastsplash (a11n)

    (@lastsplash)

    Hi there –

    I looked at this and you are correct that it uses an iframe. As such, you are right that it isn’t possible to update the player UI.

    We have a feature request open for a similar issue (adjusting the size of the play button):

    https://github.com/Automattic/jetpack/issues/22810

    and I have added this thread to that GitHub issue.

    Lastly, I have put in a request to have the documentation updated. Sorry for the confusion that this has caused.

    Since there isn’t currently a solution for this, I am going to mark this thread as “Resolved”.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘How to customize JetPack VideoPress player UI’ is closed to new replies.