Watch your favorite videos in Picture-in-Picture mode using this web page. Picture-in-Picture basically gives you a small window that stays on top of all other windows so that you can do other stuff while watching a video in a small window.
This is helpful in situations such as when you want to code along while watching a coding tutorial. You don't need to switch between windows again and again or put them side by side. Simply use Picture-in-Picture mode to run your code editor in fullscreen and the video in a small window.
This web page uses the Picture-in-Picture API and Screen Capture API to provide Picture-in-Picture mode. To learn more about these APIs check out the links below :
https://css-tricks.com/an-introduction-to-the-picture-in-picture-web-api/
https://developer.mozilla.org/en-US/docs/Web/API/Screen_Capture_API/Using_Screen_Capture
To use Picture-in-Picture mode, follow these steps :
- Play any video on Youtube or from any other website of your choice in fullscreen mode.
- Switch to another desktop and open
index.htmlfile. - Share your screen pop-up will ask you to select which screen/application/browser tab you want to share for Picture-in-Picture mode.
- Select the browser tab in which the video is playing.
- Screen sharing will begin from the source tab. Now click on the START button and the Picture-in-Picture window will appear on the screen.
- Now, browse any other window or application, the Picture-in-Picture window will always stay on top. You can increase or decrease the size according to your preference.
Screenshots below :
Share your screen pop-up for selecting screen/application/browser tab :
After selecting the browser tab, click on START button. Picture-in-Picture window appears :
Easily resize or place the window any where on the screen and do whatever you like ;)
