Fix/issue 3924 video pip

[pradeep0153]

Closes #3924.

Description

This PR significantly enhances the multitasking capabilities of the platform by introducing a native Picture-in-Picture (PiP) mode to the course video player.

Changes Made

• Integrated the HTML5 requestPictureInPicture() API into the custom video player control bar.
• Added a new, accessible "PiP" toggle icon button next to the volume controls.
• Implemented event listeners (enterpictureinpicture and leavepictureinpicture) to gracefully handle UI state changes, ensuring that custom overlays (like quizzes or annotations) are properly hidden while the video is detached, and restored when the video returns to the main DOM.
• Added graceful fallbacks for unsupported browsers (e.g., older versions of Firefox), hiding the PiP button if the API is not available on the document object.

Impact

• Multitasking & Note-taking: Previously, if a student wanted to scroll down to read the course transcript, browse the Q&A section, or take notes in a separate tab, they had to either stop the video or listen to the audio blindly. By allowing the video to float in a resizable, always-on-top window, students can seamlessly review syllabus materials and engage in discussions without ever losing visual context of the instructor's demonstration.