Great question! Let’s break this down based on what platform you’re building for—since the way to get that WhatsApp-style floating YouTube playback (Picture-in-Picture, PiP) without extra dependencies varies a bit.

Web端（浏览器环境） #

Modern browsers natively support the PiP API, so no extra packages are needed. Here's how to pull it off:

• Embed YouTube correctly: Use an <iframe> with the allow="picture-in-picture" attribute (this is non-negotiable—browsers block PiP requests without it). Make sure to use the embed format of the YouTube URL, not the regular watch link.
• Link image click to PiP: Listen for clicks on your trigger image, then call the iframe's requestPictureInPicture() method.
• Add compatibility checks: Verify if the browser supports PiP first to avoid errors.

Example code:

<!-- Hidden YouTube player (shows up temporarily for PiP) -->
<iframe id="youtubePlayer" width="560" height="315" 
        src="https://www.youtube.com/embed/YOUR_VIDEO_ID" 
        frameborder="0" allow="picture-in-picture" 
        style="display:none;"></iframe>

<!-- Trigger image -->
<img id="playTrigger" src="your-trigger-image.jpg" alt="Play video">

<script>
const triggerImg = document.getElementById('playTrigger');
const playerIframe = document.getElementById('youtubePlayer');

triggerImg.addEventListener('click', async () => {
  // Check if PiP is supported
  if (!document.pictureInPictureEnabled) {
    alert('Picture-in-Picture mode isn’t supported by your browser');
    return;
  }

  // Show player briefly (some browsers need visible elements for PiP)
  playerIframe.style.display = 'block';
  // Wait for iframe to load fully
  await new Promise(resolve => playerIframe.onload = resolve);
  
  try {
    // Launch PiP mode
    await playerIframe.requestPictureInPicture();
  } catch (err) {
    console.error('Failed to enter PiP mode:', err);
  }
});
</script>

Android端（原生） #

You can leverage Android's built-in PiP support and either the YouTube app or a WebView—no external dependencies required:

• Use the YouTube app (best for WhatsApp-like behavior): Send an Intent to the official YouTube app with a parameter to launch PiP directly. This matches how WhatsApp handles YouTube links.
• Fallback for no YouTube app: Use a WebView to load the embedded YouTube video, then hook into the WebChromeClient to handle PiP events.

Example code (Intent approach):

val videoId = "YOUR_VIDEO_ID"
val intent = Intent(Intent.ACTION_VIEW, Uri.parse("https://www.youtube.com/watch?v=$videoId"))
intent.putExtra("pip_mode", 1) // Force PiP mode
intent.setPackage("com.google.android.youtube") // Target YouTube app

if (packageManager.resolveActivity(intent, 0) != null) {
    startActivity(intent)
} else {
    // Fallback to WebView
    val webView = WebView(this)
    webView.settings.javaScriptEnabled = true
    webView.settings.mediaPlaybackRequiresUserGesture = false
    webView.loadUrl("https://www.youtube.com/embed/$videoId")
    
    webView.webChromeClient = object : WebChromeClient() {
        override fun onEnterPictureInPictureMode(params: PictureInPictureParams): Boolean {
            // Adjust your app's UI when entering PiP here
            return super.onEnterPictureInPictureMode(params)
        }
    }
    // Add WebView to your layout...
}

iOS端（原生） #

iOS has native PiP support too, and you can implement it with WKWebView (UIWebView is deprecated) without extra dependencies:

• Enable PiP in Info.plist: Add the allowsPictureInPictureMediaPlayback key and set it to YES.
• Link image click to playback: Use a hidden WKWebView to load the embedded YouTube video when the user taps the image. iOS handles PiP automatically once playback starts.

Example code:

import WebKit

class VideoPlayerViewController: UIViewController, WKUIDelegate {
    private var webView: WKWebView!

    override func loadView() {
        let webConfig = WKWebViewConfiguration()
        webConfig.allowsPictureInPictureMediaPlayback = true
        webView = WKWebView(frame: .zero, configuration: webConfig)
        webView.uiDelegate = self
        webView.isHidden = true
        view = webView
    }

    override func viewDidLoad() {
        super.viewDidLoad()
        
        // Set up trigger image
        let triggerImageView = UIImageView(image: UIImage(named: "your-trigger-image"))
        triggerImageView.isUserInteractionEnabled = true
        triggerImageView.addGestureRecognizer(UITapGestureRecognizer(target: self, action: #selector(launchPiPVideo)))
        view.addSubview(triggerImageView)
        // Add layout constraints for the image...
    }

    @objc private func launchPiPVideo() {
        let videoId = "YOUR_VIDEO_ID"
        guard let embedUrl = URL(string: "https://www.youtube.com/embed/\(videoId)?autoplay=1") else { return }
        
        webView.isHidden = false
        webView.load(URLRequest(url: embedUrl))
        // iOS will prompt or allow PiP once playback starts (the tap action satisfies user interaction requirements)
    }
}

Final Note #

You absolutely can implement this without adding any external dependencies—all solutions rely on native platform APIs and YouTube's standard embedding/intent systems, just like WhatsApp does.

内容的提问来源于stack exchange，提问作者Ayush Raj