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.
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.
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. š
