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