Support » Plugin: Seriously Simple Podcasting » HTML5-Player Design

  • Resolved Ipila

    (@ipila)


    Hello,

    Thank you for working on this plugin, which we really enjoy working with.

    We have had a problem for some time: With version 2.5.0, the design of the HTML5 player has changed so unfavorably that we have reverted to version 2.4.2 after every update. I couldn’t find any setting options and looked in vain for a solution in the support forum and in the documentation. Nobody seems to have this problem either. So I hope for your help.

    After the update: The labeling in the player runs out of the player, the text elements have been changed, the play button in red does not fit.
    What can I do to restore the layout of the player after the update?

    After the update, the player appears in the header as an HTML5 player (see screenshot). We would like to use the standard compact player only in the header. The player is integrated with a shortcode in the header element. Is there an option in the shortcode for the type of player?

    Our website is live, we are still using SSP 2.4.2. I can only show the change with screenshots:

    player-ssp-2.4.2

    player-ssp-2.7.0

    Many thanks for your help.
    Greetings,
    Iris

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

Viewing 5 replies - 1 through 5 (of 5 total)
  • Plugin Support Kelly T.

    (@keleigh824)

    Hi @ipila,

    When the HTML5 player has elements out of place, it could be because of a CSS conflict with the theme. What are you using to display the player in that section? An episode widget or shortcode? Castos Player Gutenberg block? Without being able to see it in action, I can’t say for certain why you’re having an issue with the updated player. If you could update the player again, we’ll be happy to take a look and hopefully get this sorted for you.

    Thread Starter Ipila

    (@ipila)

    Hi @keleigh824,

    I have now updated the plugin to version 2.7.2.

    The Custom Post Type Podcast is added to the main blog in the settings. For this, the HTML5 player is activated in the settings.

    Problem 1: Font sizes and play button in the HTML5 player are no longer correct (see screenshots).

    Problem 2 other player in the header: The player is integrated in the header with a shortcode [podcast_episode episode = “326” content = “player”]. The standard compact player should be used here.

    Thank you for your help.

    Plugin Support Kelly T.

    (@keleigh824)

    Hi @ipila,

    So, as far as the HTML5 player in the header that’s out of alignment, it looks like the player might be inheriting some CSS from

    page-hero {
        background-color: rgba(0,0,0,0.45);
        background-image: url(https://reisefrequenzen.de/wp-content/uploads/2018/11/hero-reisefrequenzen.jpg);
        background-size: cover;
        background-image: linear-gradient(
    0deg
    , rgba(0,0,0,0.45),rgba(0,0,0,0.45)), url(https://reisefrequenzen.de/wp-content/uploads/2018/11/hero-reisefrequenzen.jpg);
        background-repeat: no-repeat;
        color: #ffffff;
        padding-top: 12%;
        padding-right: 70px;
        padding-bottom: 13%;
        padding-left: 70px;
        text-align: center;
        box-sizing: border-box

    It appears to be using text-align: center which is pushing the elements to the center. Disabling that line, or making it align: left makes the player appear as it should when inspecting the site. Obviously, though, that might affect other areas of the site that uses that CSS. Also, if you wanted this to be a Compact player, could you use a widget in this header area instead of the shortcode? If you use the Podcast: Single Episode Widget that is available in the widgets area, this uses the compact player regardless of whether or not you have your player settings (Podcast -> Settings -> Player) set to display the HTML5 player.

    Further, the HTML5 player does look best when it has at least 475px in width so if you could either lessen the padding in the columns on the main page or widen the columns so that the DIV where the player is can stretch to at least 475px, that would help prevent the player from getting truncated on the left.

    I hope this helps some!

    Thread Starter Ipila

    (@ipila)

    Hi @keleigh824,

    Thank you for your help.

    In the header area I was able to add a widget area and use the single episode widget. So it is solved.

    For the newly designed HTML5 player, I was able to improve the look with a little CSS and adapt it to our column layout. Also solved.

    Only the color of the play button cannot be changed with CSS (SVG icon). The red color doesn’t go well with us. Perhaps a small selection could be created there in the future?

    Thanks again for all the work on this great plugin.

    Plugin Support Kelly T.

    (@keleigh824)

    Greetings @ipila,

    I’m glad I was able to help and everything is resolved. šŸ™‚

    In the future, we are looking to make the HTML5 player a little more customizable with regards to that play button color. šŸ‘

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘HTML5-Player Design’ is closed to new replies.