WordPress 5.8.1 does not show Video Player inside Spoiler HTML5 details

  • Resolved viang

    (@viang)


    3 years, 1 month ago

    I have WordPress 5.8.1 installed on my site
    On some pages I use HTML5 Spoiler <details>. I recently discovered that the video player in this spoiler is not showing after posting.
    Everything works well in the admin panel (… wp-admin / post php? …), the video player is shown.
    Another odd thing for me is that the player appears on the published page if I open the DevTools in the browser.

    Can someone tell me what the error is and how to fix it? Someone may have encountered this before.

    My html code to embed video in spoiler:

    <details>
<summary>Watch video lessons:</summary>
<p>Video tutorial: Talking tree (basic use)</p>
<div class="outer-wrapper"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/ZHmFW0lNspc?rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe></div></div>
<p>Talking machine (how to apply Auto Lip-Sync to a moving object)</p>
<div class="outer-wrapper"><div class="video-container"><iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/PVcsoULpDYI?rel=0&showinfo=0&iv_load_policy=3" frameborder="0" allowfullscreen></iframe></div></div>
</details>

    At the time of posting, I am using an HTML block in Gutenberg to insert this code.

    My CSS code:

    /** Spoiler html5 */

details[open] {
    margin-bottom: 2%;
    background-color: #ecf0f1;
    padding: 10px;
}
summary::-webkit-details-marker {
    color: #1e90ff;
}

summary {
    display: block;
    width: -webkit-fit-content;
    width: -moz-fit-content;
    width: fit-content;
    border-bottom: 1px dotted;
    font-weight: bold;
    cursor: pointer;
    outline-style: none;
    margin: 20px 20px 28px 20px;
}

  /** Video - Wrapper for the player */

.outer-wrapper {
    width: 100%;
    max-width: 560px;
    margin: 0 0 10px;
}
.video-container {
    padding-top: 25px;
    padding-bottom: 56.25%;
    display: block;
    height: 0;
    overflow: hidden;
    position: relative;
    z-index: 1;
    margin: auto;
}
iframe, video {
    display: block;
    height: 100%;
    width: 100%;
    position: absolute;
    top: 0;
    z-index: 5;
    left: 0;
}
    • This topic was modified 3 years, 1 month ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Everything else WordPress topic

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • Thread Starter viang

    (@viang)

    I found part of the problem. It is css related. The Element Style unknown to me overwrites mine: width 100%; and height 100%; in an iframe, video.
    If I add !important to the width and height, then the video player reappears in the spoiler like it did before.
    I used to have WordPress 5.6.1 installed on HAMPP and everything worked fine there. After I upgraded to WordPress 5.8.1 and updated all themes, I got this problem with showing the player in the spoiler html5 details.
    The correct solution would be to find the styled code that blocks my width and height. Perhaps the theme I’m using is to blame? The theme has been updated with new versions several times.

    • This reply was modified 3 years, 1 month ago by viang.
    Thread Starter viang

    (@viang)

    My assumptions turned out to be correct. The new version of the template has a code that rewrites my CSS to insert a video.
    This problem has been known since 2019 https://github.com/…/14257 and continues to occur occasionally, as in my case with the Video Player inside the details html5 Spoiler.
    The problematic part of the code:

    // Scale based on ratio, thus retaining proportions.
video.style.width = iTargetWidth + 'px';
video.style.height = ( video.dataset.origheight * ratio ) + 'px';
Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘WordPress 5.8.1 does not show Video Player inside Spoiler HTML5 details’ is closed to new replies.