Picture in picture

With the Picture-in-Picture API you can display an element in a floating window.
It is not limited to videos; you can use it for any DOM element.

To use it, you need to add the data-pwa--picture-in-picture-target="container" attribute to the container element.
If the container element has a child with the data-pwa--picture-in-picture-target="floating" attribute, it will be displayed in the floating window. Otherwise, the first child will be used.

If possible when the PIP window is closed, the floating element will be placed back in the container at the original position.

<div {{ stimulus_controller("@pwa/picture-in-picture") }}>
    <button
        type="button"
        class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 me-2 mb-2 dark:bg-blue-600 dark:hover:bg-blue-700 focus:outline-none dark:focus:ring-blue-800"
        {{ stimulus_action("@pwa/picture-in-picture", "toggle") }}
    >
        Toggle Picture-in-Picture
    </button>
    <div {{ stimulus_target("@pwa/picture-in-picture", "container") }}>
        <video class="w-full h-auto max-w-full" controls {{ stimulus_target("@pwa/picture-in-picture", "floating") }}>
            <source src="..." type="video/mp4">
            Your browser does not support the video tag.
        </video>
    </div>
</div>