Skip to main content
100%

Detach video bookmarklet: javascript:(function (src) {var s;s=document.createElement('script');s.src=src;document.body.appendChild(s);}('https://gist.githubusercontent.com/abernier/9730666/raw/detachvideo.js'));)

✓ Published0🌍 Public
Aabernier
Last edited May 10, 2014
Created on Mar 23, 2014

This bookmarklet detaches the largest video element from a webpage and reopens it in a separate pop-up window sized to its original dimensions, preserving the viewer’s context while hiding the surrounding page. The code uses the DOM API (`querySelectorAll`, `getBoundingClientRect`) to sort all `video`, `object`, and `iframe` tags by area, then opens the video’s URL (or the iframe’s `src`) via `window.open`. After load, it scrolls the pop-up to match the original video’s position and sets `overflow` to `hidden` on both the body and its parent, isolating the playback. The script relies on plain JavaScript, with no external libraries.

AI-generated description

Similar vizzes

Loading thumbnail…

A simple method to stop YouTube, Vimeo, and HTML5 videos from playing.

This example demonstrates a JavaScript utility for pausing embedded videos within a webpage. It shows how to stop playback for both HTML5 `<video>` elements and iframe-based players from services like YouTube or Vimeo. The code defines a `stopVideo` function that takes a container element and uses the standard DOM API to pause the video. For iframes, it resets the `src` attribute by reassigning the iframe’s current `src` property, forcing a reload. For native `<video>` elements, it directly calls the `pause()` method. The example relies solely on native JavaScript DOM manipulation, with no external libraries or frameworks.

MMistyBlunch
58% match
Loading thumbnail…

Fair-ly useful, quick and dirty bookmarklet for removing a div with `#subscription-overlay` and taking `overflow:hidden` off the body.

This example demonstrates a quick, practical workaround for removing a paywall-style subscription overlay from a webpage. The code uses jQuery to select and delete the element with the ID `subscription-overlay`, then resets the body’s CSS `overflow` property from `hidden` to `visible`. It relies on the jQuery library’s `remove()` method and the `css()` method for style manipulation. The example shows a minimal, single-purpose bookmarklet that directly targets a specific DOM structure without additional data or rendering logic.

Aandrewcowley
57% match
Loading thumbnail…

Responsive Video Resize 16:9

This example demonstrates a responsive video player that maintains a 16:9 aspect ratio within its container. It shows how the video element automatically adjusts its dimensions based on available space, prioritizing either width or height depending on the container’s proportions. The code uses vanilla JavaScript with the `clientWidth` and `clientHeight` properties to measure the parent element, then directly manipulates the video’s `style.width` and `style.height` properties. It compares the container’s aspect ratio against the target 16:9 ratio to determine whether to constrain by width or height. No external libraries are required; the logic relies solely on DOM element references and inline style updates.

Aadammarcwilliams
57% match
Loading thumbnail…

video display

This example displays a responsive embedded YouTube video within a D3.js v4 page, using an HTML iframe inside a styled video container. The container maintains a 16:9 aspect ratio with padding and positioning, while the iframe fills the available space. No data visualization or D3 API calls are present; the code solely handles video presentation through standard HTML and CSS.

BBrieLewis
56% match
Loading thumbnail…

fullscreen.js, no dependency

This example demonstrates how to add a fullscreen toggle button to any web page, showing a persistent user interface control that enables immersive viewing. The code appends a clickable “Fullscreen” button to the document body, leveraging the native browser fullscreen API through vendor-prefixed methods like `webkitRequestFullScreen` and `mozRequestFullScreen` to handle cross-browser support. On activation or exit, it triggers a redraw of the page after 200 milliseconds to refresh the visualization. The button label changes to a multiplication sign when in fullscreen mode, reflecting the current state via the `fullscreenchange` event listener.

PPhilippe Rivière
55% match
Loading thumbnail…

Web Archive Bookmarklet Code

A one-line JavaScript bookmarklet opens the current page in the Internet Archive’s Wayback Machine. The code triggers `window.open` on the URL formed by concatenating `'https://web.archive.org/web/'` with the live document’s `location.href`. This example demonstrates URL string construction and the Web’s `window.open` API for navigation, with no charting or graphics libraries involved. The plain text snippet contains no data visualization logic, showing instead a minimal utility for historical page capture.

NNGuernse
55% match
Loading thumbnail…

Untitled

This example displays a single embedded YouTube video within a bare-bones HTML page titled “Fork 123 of Hello HTML.” The page contains no interactive data visualization; instead, it relies on an `<iframe>` to load the video player from YouTube’s embed API. The code uses standard HTML elements (`<h1>`, `<body>`, `<iframe>`) with no external JavaScript libraries or rendering techniques. The visualization is static, showing only the video player and heading text as its entire content.

HHuchenhaoArvin
54% match
Loading thumbnail…

Fork you

This example, titled “Fork you,” presents a blank HTML page that immediately loads an embedded YouTube video. It shows a playful, minimal interface where the sole content is a video player, demonstrating how a bare-bones HTML document can integrate external media. The code uses a standard `<iframe>` with YouTube’s embed URL and parameters for autoplay and fullscreen access, while the rest of the page remains empty. No JavaScript libraries or data visualization APIs are present; the rendering approach relies solely on the browser’s native handling of the iframe and YouTube’s player.

Ssamuelsimkai
54% match