WIP: Video attribute playinline="true" impossible to remove

Bugs
1

I’m having trouble while displaying videos full screen on mobile, they won’t play automatically full screen on mobile, as expected when play inline is set off. They always play inline.

On the HTML the video element has always attribute playsinine=“true”, even when it has been turned off on the Bricks video element.

Today I’ve tested on a clean sandbox on Try Bricks – t45d6dd5 and I can replicate the issue on a fresh install.

Captura de pantalla 2024-04-30 a las 15.03.13
Captura de pantalla 2024-04-30 a las 15.03.131464×646 158 KB

Is this a Bricks bug, or I’m missing something?. I’ve searched in the forum and I see no results about this.

I ‘ve tried to solve it with this JS, but it doesn’t removes the attribute (Help!):

<script>

//Select the video container

**var PreviewDiv = document.getElementById(‘brxe-jixsvo’);**

//Select the video element

**var VideoPreview = PreviewDiv.querySelector('video');**

// Remove attribute

**VideoPreview.removeAttribute('playsinline’);**

//Turn down opacity to check that the element is getting identified

**VideoPreview.style.opacity = '0.2’;**

</script>

Additionally the attribute playsinline is a boolean, so removing it with JS will have no effect, as once has been printed, whatever is its value (or no value), just the presence of the attribute means “true”, and deleting it after will have no effect. So not sure how to proceed.

Please let me know if this is a bug and if there is a quick elegant way to solve this, I’m receiving complains from the visitors. Using the custom video player ply.io on Settings>Theme Styles>Video Element is not an option to patch this, we don’t want to add extra JS libraries incrementing calls and load times.

2

Hi @paquito,

Thank you for your report,

Yes, you’re right this is a bug as the playsinline value never changes. I have added this to our internal bug tracker.

Regarding the temporary workaround, your script had multiple invalid quotation marks.

And you also should add DOMContentLoaded & loadedmetadata event listeners. Here’s how you might implement it:

<script>
document.addEventListener('DOMContentLoaded', function() {
    var PreviewDiv = document.getElementById('brxe-jixsvo');
    if (!PreviewDiv) {
        return;
    }

    var VideoPreview = PreviewDiv.querySelector('video');
    if (!VideoPreview) {
        return;
    }

    // Attach event listener to video for loaded metadata
    VideoPreview.addEventListener('loadedmetadata', function() {
        // Attempt to remove the attribute
        VideoPreview.removeAttribute('playsinline');
    });
});
</script>

I hope that helps!

1 Like