• Home
  • Jumpy Live Frame Selector (Full Canvas, Auto-Resizing)

    Jumpy Live Frame Selector (Portable - Includes all code)
    <form name="jumpy" style="background:transparent">
    <select name="example" size="1" onChange="gone()">
    <option value="https://noobish.com/cat-vs-ball-of-yarn/">Select a Site (or Play w/Cat)</option>
    <option value="https://denverit.com">DenverIT.com</option>
    <option value="https://halsgallery.com">HalsGallery.com</option>
    <option value="https://culturesolutionsgroup.com">CultureSolutionsGroup.com</option>
    <option value="https://microchic.fm">MicroChic.fm</option>
    <option value="https://microchic.com">MicroChic.com</option>
    <input type="button" name="test" value="Go!" onClick="gone()">
    <script language="javascript">
    //Drop-down Document Viewer- (c) Dynamic Drive (www.dynamicdrive.com)
    //For full source code, 100's more DHTML scripts, and TOS,
    //visit http://www.dynamicdrive.com
    //Specify display mode (0 or 1)
    //0 causes document to be displayed in an inline frame, while 1 in a new browser window
    var displaymode=0
    //if displaymode=0, configure inline frame attributes (ie: dimensions, intial document shown
    var iframecode='<iframe id="external" style="width:100%; height: calc(100vh - 21.2px); border: none;" src="https://noobish.com/cat-vs-ball-of-yarn/"></iframe>'
    /////NO NEED TO EDIT BELOW HERE////////////
    if (displaymode==0)
    function gone(){
    var selectedurl=document.jumpy.example.options[document.jumpy.example.selectedIndex].value
    if (document.getElementById&&displaymode==0)
    else if (document.all&&displaymode==0)
    if (!window.win2||win2.closed)
    //else if win2 already exists
            // Selecting the iframe element
            var frame = document.getElementById("external");
            // Adjusting the iframe height onload event
            frame.onload = function()
            // function execute while load the iframe
              // set the height of the iframe as 
              // the height of the iframe content
              frame.style.height = 
              frame.contentWindow.document.body.scrollHeight + 'px';
              // set the width of the iframe as the 
              // width of the iframe content
              frame.style.width  = 

    YouTube Embed Light (Full Canvas, Auto-Resizing)

    <div class="youtube-embed" data-id="hmH3XMlms8E"></div>

    Or select to use the Youtube Full Canvas Template in the Post Editor and put (only) the YouTube Video ID Code (i.e. hmH3XMlms8E) in the Facebook Description Field.

    YouTube Embed Light (Portable - Includes all code)
    lite-youtube {
        background-color: #000;
        position: relative;
        display: block;
        contain: content;
        background-position: center center;
        background-size: cover;
        cursor: pointer;
        max-width: 720px;
    /* gradient */
    lite-youtube::before {
        content: '';
        display: block;
        position: absolute;
        top: 0;
        background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAADGCAYAAAAT+OqFAAAAdklEQVQoz42QQQ7AIAgEF/T/D+kbq/RWAlnQyyazA4aoAB4FsBSA/bFjuF1EOL7VbrIrBuusmrt4ZZORfb6ehbWdnRHEIiITaEUKa5EJqUakRSaEYBJSCY2dEstQY7AuxahwXFrvZmWl2rh4JZ07z9dLtesfNj5q0FU3A5ObbwAAAABJRU5ErkJggg==);
        background-position: top;
        background-repeat: repeat-x;
        height: 60px;
        padding-bottom: 50px;
        width: 100%;
        transition: all 0.2s cubic-bezier(0, 0, 0.2, 1);
    /* responsive iframe with a 16:9 aspect ratio
        thanks https://css-tricks.com/responsive-iframes/
    lite-youtube::after {
        content: "";
        display: block;
        padding-bottom: calc(100% / (16 / 9));
    lite-youtube > iframe {
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        border: 0;
    /* play button */
    lite-youtube > .lty-playbtn {
        width: 68px;
        height: 48px;
        position: absolute;
        cursor: pointer;
        transform: translate3d(-50%, -50%, 0);
        top: 50%;
        left: 50%;
        z-index: 1;
        background-color: transparent;
        /* YT's actual play button svg */
        background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 68 48"> .lty-playbtn,
    lite-youtube .lty-playbtn:focus {
        filter: none;
    /* Post-click styles */
    lite-youtube.lyt-activated {
        cursor: unset;
    lite-youtube.lyt-activated > .lty-playbtn {
        opacity: 0;
        pointer-events: none;
    .lyt-visually-hidden {
        clip: rect(0 0 0 0);
        clip-path: inset(50%);
        height: 1px;
        overflow: hidden;
        position: absolute;
        white-space: nowrap;
        width: 1px;
    <lite-youtube videoid="ogfYd705cRs" playlabel="Play: Keynote (Google I/O '18)"></lite-youtube>
     * A lightweight youtube embed. Still should feel the same to the user, just MUCH faster to initialize and paint.
     * Thx to these as the inspiration
     *   https://storage.googleapis.com/amp-vs-non-amp/youtube-lazy.html
     *   https://autoplay-youtube-player.glitch.me/
     * Once built it, I also found these:
     *   https://github.com/ampproject/amphtml/blob/master/extensions/amp-youtube (👍👍)
     *   https://github.com/Daugilas/lazyYT
     *   https://github.com/vb/lazyframe
    class LiteYTEmbed extends HTMLElement {
        connectedCallback() {
            this.videoId = this.getAttribute('videoid');
            let playBtnEl = this.querySelector('.lty-playbtn');
            // A label for the button takes priority over a [playlabel] attribute on the custom-element
            this.playLabel = (playBtnEl && playBtnEl.textContent.trim()) || this.getAttribute('playlabel') || 'Play';
             * Lo, the youtube placeholder image!  (aka the thumbnail, poster image, etc)
             * See https://github.com/paulirish/lite-youtube-embed/blob/master/youtube-thumbnail-urls.md
             * TODO: Do the sddefault->hqdefault fallback
             *       - When doing this, apply referrerpolicy (https://github.com/ampproject/amphtml/pull/3940)
             * TODO: Consider using webp if supported, falling back to jpg
            if (!this.style.backgroundImage) {
              this.posterUrl = `https://i.ytimg.com/vi/${this.videoId}/hqdefault.jpg`;
              // Warm the connection for the poster image
              LiteYTEmbed.addPrefetch('preload', this.posterUrl, 'image');
              this.style.backgroundImage = `url("${this.posterUrl}")`;
            // Set up play button, and its visually hidden label
            if (!playBtnEl) {
                playBtnEl = document.createElement('button');
                playBtnEl.type = 'button';
            if (!playBtnEl.textContent) {
                const playBtnLabelEl = document.createElement('span');
                playBtnLabelEl.className = 'lyt-visually-hidden';
                playBtnLabelEl.textContent = this.playLabel;
            // On hover (or tap), warm up the TCP connections we're (likely) about to use.
            this.addEventListener('pointerover', LiteYTEmbed.warmConnections, {once: true});
            // Once the user clicks, add the real iframe and drop our play button
            // TODO: In the future we could be like amp-youtube and silently swap in the iframe during idle time
            //   We'd want to only do this for in-viewport or near-viewport ones: https://github.com/ampproject/amphtml/pull/5003
            this.addEventListener('click', e => this.addIframe());
        // // TODO: Support the the user changing the [videoid] attribute
        // attributeChangedCallback() {
        // }
         * Add a  to the head
        static addPrefetch(kind, url, as) {
            const linkEl = document.createElement('link');
            linkEl.rel = kind;
            linkEl.href = url;
            if (as) {
                linkEl.as = as;
         * Begin pre-connecting to warm up the iframe load
         * Since the embed's network requests load within its iframe,
         *   preload/prefetch'ing them outside the iframe will only cause double-downloads.
         * So, the best we can do is warm up a few connections to origins that are in the critical path.
         * Maybe `` would work, but it's unsupported: http://crbug.com/593267
         * But TBH, I don't think it'll happen soon with Site Isolation and split caches adding serious complexity.
        static warmConnections() {
            if (LiteYTEmbed.preconnected) return;
            // The iframe document and most of its subresources come right off youtube.com
            LiteYTEmbed.addPrefetch('preconnect', 'https://www.youtube-nocookie.com');
            // The botguard script is fetched off from google.com
            LiteYTEmbed.addPrefetch('preconnect', 'https://www.google.com');
            // Not certain if these ad related domains are in the critical path. Could verify with domain-specific throttling.
            LiteYTEmbed.addPrefetch('preconnect', 'https://googleads.g.doubleclick.net');
            LiteYTEmbed.addPrefetch('preconnect', 'https://static.doubleclick.net');
            LiteYTEmbed.preconnected = true;
        addIframe() {
            const params = new URLSearchParams(this.getAttribute('params') || []);
            params.append('autoplay', '1');
            const iframeEl = document.createElement('iframe');
            iframeEl.width = 560;
            iframeEl.height = 315;
            // No encoding necessary as [title] is safe. https://cheatsheetseries.owasp.org/cheatsheets/Cross_Site_Scripting_Prevention_Cheat_Sheet.html#:~:text=Safe%20HTML%20Attributes%20include
            iframeEl.title = this.playLabel;
            iframeEl.allow = 'accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture';
            iframeEl.allowFullscreen = true;
            // AFAIK, the encoding here isn't necessary for XSS, but we'll do it only because this is a URL
            // https://stackoverflow.com/q/64959723/89484
            iframeEl.src = `https://www.youtube-nocookie.com/embed/${encodeURIComponent(this.videoId)}?${params.toString()}`;
            // Set focus for a11y
    // Register custom element
    customElements.define('lite-youtube', LiteYTEmbed);

    Add &igu=1 to the end of a Google Search to display the results in an iFrame... ghost blog themes

    <a href="https://www.google.com/search?q=ghost+blog+themes&igu=1" rel="dd">ghost blog themes</a>

    Otter.ai Audio Embeds, Popups and Slide-Ins >>


    Put this in the Excerpt field, replacing CODE with the code from the shared Otter Note URL.
    (uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

    <a href="https://otter.ai/u/CODE?noGapBottom=true" rel="otter">LISTEN</a>

    Note: to slide-in a page other than Otter, use rel=dd
    (uses ddajaxsidepanel.min.js, div.ddajaxsidepanel, .ddajaxsidepanel .contentarea, and div.ddajaxsidepanel iframe)

    Title/Image Pop-Up (full canvas) iFrame

    Full canvas - the iFrame content covers the entirety of the popped-up page, with a Home button in the top left corner (also useful for embedding, popping up or sliding in from other sites.)

    a. In the editor, select the Otter Full Canvas Template (which only uses the empty as wrapper for the iFrame.
    b. In the Facebook Description, put (only) the Otter CODE.

    Or... alternatively – put this HTML into the content of the post. This accomplishes the same as the above, but includes all of the default post elements which you can selectively include on the page along with the iFrame. (Also useful as a re-usable Snippet in the editor.)

    (uses iframe.modal_iframe modal_iframe-on, div.otterpop, and div.otterpop iframe)

    <div class="otterpop">
        <iframe src="https://otter.ai/u/CODE?noGapBottom=true"></iframe>
    body.post-template article.post,
    .container-wrap-modal {
        padding: 0;
    .group {
    figure {
        margin: 0


    Image Link Slide-In >>

    (uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

    <div style="padding: 0 25%">
      <a href="https://otter.ai/u/CODE?noGapBottom=true" rel="otter">
        <h2 class="post-title" style="font-size: 1.2em">
            Listen >>


    .post-full-image {
        display: none
    .kg-image-card {
        margin: 0

    Text Link Slide-In >>

    (uses ddottersidepanel.min.js, div.ddottersidepanel, .ddottersidepanel .contentarea, and div.ddottersidepanel iframe)

    <a href="https://otter.ai/u/CODE?noGapBottom=true" rel="otter">Listen >></a>

    Embedded Block >>

    Use this sparingly as it loads with the page and slows down the site.
    (uses div.otterframe and div.otterframe iframe)

    <div class="otterframe">
    <iframe src="https://otter.ai/u/CODE?noGapBottom=true"></iframe>

    The portable version (to embed Otter.ai posts in any other site) is this code (also useful as a re-usable Snippet in the editor):

    Otter.ai Embeds (Portable - Includes all code)
    div.otterframe iframe {
        border:0px none;
        margin:-57px 0 1.5em 0
    div.otterframe {
        box-shadow: -1px 3px 15px -4px rgba(0,0,0,0.76)
    @media (max-width: 767px) {
        div.otterframe {
    <div class="otterframe">
    <iframe src="https://otter.ai/u/CODE?noGapBottom=true">