Felix Förtsch
288 lines
6.9 KiB
HTML
288 lines
6.9 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en-us">
|
||
|
||
<head>
|
||
<link href="https://gmpg.org/xfn/11" rel="profile" />
|
||
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
|
||
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
|
||
|
||
<!-- Enable responsiveness on mobile devices-->
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
|
||
|
||
<title>
|
||
|
||
Use Picture-in-Picture Mode on Mac and iPad with a Bookmarklet · felixfoertsch.de
|
||
|
||
</title>
|
||
|
||
<!-- CSS -->
|
||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||
|
||
<!-- Icons -->
|
||
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="/favicon.png" />
|
||
<link rel="shortcut icon" href="/favicon.png" />
|
||
|
||
<!-- RSS -->
|
||
<link rel="alternate" type="application/rss+xml" title="RSS" href="/feed.xml" />
|
||
|
||
</head>
|
||
|
||
|
||
<body class="post">
|
||
|
||
<nav class="navbar navbar-dark bg-dark navbar-expand-md ">
|
||
<div class="container-fluid">
|
||
|
||
<a class="nav-link navbar-brand " href="/"><img src="/favicon.png" width="30" height="30" alt=""> </a>
|
||
|
||
|
||
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navigation-toggle" aria-controls="navigation-toggle" aria-expanded="false" aria-label="Toggle navigation">
|
||
<span class="navbar-toggler-icon"></span>
|
||
</button>
|
||
|
||
<div class="collapse navbar-collapse" id="navigation-toggle">
|
||
<div class="navbar-nav">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<a class="nav-link" href="/about">About</a>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<a class="nav-link" href="/repositories">Repositories</a>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li class="nav-item dropdown">
|
||
<a class="nav-link dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-expanded="false">Categories</a>
|
||
<ul class="dropdown-menu">
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a class="dropdown-item " href="/category/Design">Design</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
<li><a class="dropdown-item " href="/category/Programming">Programming</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
<li><a class="dropdown-item " href="/category/Tips">Tips</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a class="dropdown-item " href="/category/summaries">Summaries</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<li><a class="dropdown-item " href="/category/tutorials">Tutorials</a></li>
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
|
||
</ul>
|
||
</li>
|
||
|
||
|
||
<a class="nav-link" title="Tags" aria-label="Tags" href="/tags">Tags</a>
|
||
|
||
<a class="nav-link" title="Subscribe" aria-label="Subscribe" href="/feed.xml">RSS</a>
|
||
|
||
<span></span>
|
||
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</nav>
|
||
|
||
<main class="container py-3">
|
||
<header class="row py-3">
|
||
<div class="col">
|
||
<h1 class="display-1">Use Picture-in-Picture Mode on Mac and iPad with a Bookmarklet</h1>
|
||
</div>
|
||
</header>
|
||
<div class="row">
|
||
<div class="col">
|
||
<div class="card-subtitle mb-2 text-muted">
|
||
|
||
<span class="">2019-02-15</span> •
|
||
<span class=""><svg height="12" class="octicon octicon-sync" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M8 2.5a5.487 5.487 0 00-4.131 1.869l1.204 1.204A.25.25 0 014.896 6H1.25A.25.25 0 011 5.75V2.104a.25.25 0 01.427-.177l1.38 1.38A7.001 7.001 0 0114.95 7.16a.75.75 0 11-1.49.178A5.501 5.501 0 008 2.5zM1.705 8.005a.75.75 0 01.834.656 5.501 5.501 0 009.592 2.97l-1.204-1.204a.25.25 0 01.177-.427h3.646a.25.25 0 01.25.25v3.646a.25.25 0 01-.427.177l-1.38-1.38A7.001 7.001 0 011.05 8.84a.75.75 0 01.656-.834z"></path></svg> Updated: 2020-07-20</span>
|
||
|
||
|
||
<span class="post-categories">
|
||
|
||
•
|
||
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/category/Tips">Tips</a>
|
||
|
||
|
||
</span>
|
||
</div>
|
||
|
||
|
||
<div>
|
||
<p><a href="https://twitter.com/SnazzyQ">Quinn</a> from <a href="https://www.youtube.com/channel/UCO2x-p9gg9TLKneXlibGR7w">Snazzy Labs</a> just posted an <a href="https://www.youtube.com/watch?v=cqjpa8-Cp-s">interesting video</a> about some macOS utilities. I love small utilities, but I like it even better, when a problem can be solved with system functions. That is the case here. He mentions Helium - an app to use a form of picture in picture mode for websites that don’t support the native PIP.</p>
|
||
|
||
<p>However, there is a better solution! And this solution works on Mac as well as iPad!</p>
|
||
|
||
<!-- more -->
|
||
|
||
<p>You can use a small <a href="https://en.wikipedia.org/wiki/Bookmarklet">bookmarklet</a> that pushes the current HTML5 video on screen into the native PIP. And yes, it also works with Netflix, <strong>if</strong> you are on macOS Mojave or up (as far as I can tell, Netflix doesn’t run in the previous versions of Safari).</p>
|
||
|
||
<p>Create a new bookmark, enter the following string as the address, give it a nice emoji (like this: ⤵️), voilà! You can now use the native PIP for nearly all your videos!
|
||
Here is the code:</p>
|
||
|
||
<div class="language-plaintext highlighter-rouge"><div class="highlight"><pre class="highlight"><code>javascript:document.querySelector(%22video%22).webkitSetPresentationMode(%22picture-in-picture%22);
|
||
</code></pre></div></div>
|
||
|
||
|
||
</div>
|
||
|
||
<div class="py-3">
|
||
|
||
|
||
|
||
|
||
|
||
<a href="/tags#english"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> English</span></a>
|
||
|
||
<a href="/tags#apple"><span class="btn btn-sm btn-secondary"><svg height="12" class="octicon octicon-tag" viewBox="0 0 16 16" version="1.1" width="12" aria-hidden="true"><path fill-rule="evenodd" d="M2.5 7.775V2.75a.25.25 0 01.25-.25h5.025a.25.25 0 01.177.073l6.25 6.25a.25.25 0 010 .354l-5.025 5.025a.25.25 0 01-.354 0l-6.25-6.25a.25.25 0 01-.073-.177zm-1.5 0V2.75C1 1.784 1.784 1 2.75 1h5.025c.464 0 .91.184 1.238.513l6.25 6.25a1.75 1.75 0 010 2.474l-5.026 5.026a1.75 1.75 0 01-2.474 0l-6.25-6.25A1.75 1.75 0 011 7.775zM6 5a1 1 0 100 2 1 1 0 000-2z"></path></svg> Apple</span></a>
|
||
|
||
</div>
|
||
<section>
|
||
<h2>Related Posts</h2>
|
||
<ul>
|
||
|
||
<li>
|
||
<a href="/2020/08/05/Apple-Colors.html"> Apple Colors in SCSS</a>
|
||
|
||
<span class="badge bg-secondary">2020-08-05</span>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/2020/08/04/Ideas.html"> Ideas</a>
|
||
|
||
<span class="badge bg-secondary">2020-08-04</span>
|
||
|
||
</li>
|
||
|
||
<li>
|
||
<a href="/2020/08/02/Strategies-from-the-Happiness-Lab.html"> Strategies from the Happiness Lab</a>
|
||
|
||
<span class="badge bg-secondary">2020-08-02</span>
|
||
|
||
</li>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
</main>
|
||
|
||
<footer class="container-fluid py-3">
|
||
|
||
<script src="/assets/js/bootstrap.min.js" crossorigin="anonymous"></script>
|
||
</footer>
|
||
</body>
|
||
</html>
|