diff --git a/cast/static/cast/css/bootstrap4/cast.css b/cast/static/cast/css/bootstrap4/cast.css
index 3898cfbd..05f27076 100644
--- a/cast/static/cast/css/bootstrap4/cast.css
+++ b/cast/static/cast/css/bootstrap4/cast.css
@@ -202,3 +202,15 @@
*/
display: block;
}
+
+.podlove-player-container {
+ width: 936px; /* Desktop width */
+ height: 300px; /* Desktop height */
+}
+
+@media (max-width: 768px) {
+ .podlove-player-container {
+ width: 366px; /* Mobile width */
+ height: 500px; /* Mobile height */
+ }
+}
diff --git a/cast/templates/cast/audio/audio.html b/cast/templates/cast/audio/audio.html
index f2517b4a..caf3e1b5 100644
--- a/cast/templates/cast/audio/audio.html
+++ b/cast/templates/cast/audio/audio.html
@@ -1,6 +1,7 @@
{% if page.pk %}
diff --git a/cast/templates/cast/bootstrap4/blog_list_of_posts.html b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
index b4cb11cc..304ea1b1 100644
--- a/cast/templates/cast/bootstrap4/blog_list_of_posts.html
+++ b/cast/templates/cast/bootstrap4/blog_list_of_posts.html
@@ -113,7 +113,7 @@
}
function initializePodlovePlayers() {
- document.querySelectorAll('section.block-audio div[id^="audio_"]').forEach(div => {
+ document.querySelectorAll('.podlove-player-container').forEach(div => {
initializePodlovePlayerWhenVisible(div);
});
}
diff --git a/docs/releases/0.2.40.rst b/docs/releases/0.2.40.rst
index 924862d8..2b89b179 100644
--- a/docs/releases/0.2.40.rst
+++ b/docs/releases/0.2.40.rst
@@ -4,3 +4,4 @@
Improved the performance of the web player by
- #167 Waiting for the load event before initializing the player (instead of using DOMContentLoaded)
- #167 Only initializing the player once the player is visible in the viewport
+- #167 Save space for the player in the layout, even if it's not visible