VYBE.ARTLearnOpen studio

Share and export

Embedding a piece

Put a live piece on your own site with an iframe.

An embed runs a piece live on your own website, blog or portfolio, inside a frame on the page. It plays and responds to the pointer as it does on VYBE.ART. You choose its size and shape, copy a few lines of code and paste them into your page.

Opening the embed maker

There are two ways in:

  • In the studio, choose Embed code from the Export menu. It makes embed code for the version on stage.
  • On a piece's page, click the code button in the row along the top (its tooltip says "Embed on your site"). It makes embed code for that piece. The button isn't shown on phones.

The left side of the embed maker is a live preview. It runs the real player at the address in the code, so what you see is what your visitors get.

Making embed code

  1. Pick a size

    Under Size, choose Responsive or Fixed.

    • Responsive fills the width of the space on your page and keeps a fixed shape. Under Shape, pick 16:9, 4:3, 1:1 or 9:16.
    • Fixed is an exact size in pixels. Type a width and a height under Pixels, anything from 120 to 4,096, and press Enter or click away to apply it. A fixed embed still shrinks to fit a page narrower than it.

  2. Choose the finishing touches

    • Show title on hover shows the piece's title along the bottom when a visitor moves over it.
    • Rounded corners rounds the frame's corners.
    • Show the VYBE.ART mark appears for your own pieces when your plan lets you leave the mark off. See Leaving the mark off.

  3. Copy the code

    Click Copy embed code. The button says Copied when it's on your clipboard. If the browser won't let the page copy, the code is selected for you instead: press ⌘ C (Ctrl C on Windows).

  4. Paste it into your page

    Paste the code into your page's HTML, or into the HTML or embed block of your site builder. The arrow button next to Copy embed code opens the player on its own in a new tab.

Responsive code looks like this:

<div style="position:relative;width:100%;aspect-ratio:16/9;"><iframe src="https://www.vybe.art/e/Hk3mQ9xTz2" title="Aurora Veil · VYBE.ART" loading="lazy" allow="fullscreen; autoplay; xr-spatial-tracking" allowfullscreen style="position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:12px;"></iframe></div>

Fixed code is a single iframe with a width and height.

Which version an embed plays

An embed made in the studio plays the version on stage when you made it:

  • If that version is the one you've published, the embed plays the published piece, and it changes when you click Update published piece in the Publish popover. Publish first if you want an embed that follows your updates.
  • Otherwise the embed plays that version, and later edits in the studio don't change it. To embed a newer version, make new embed code.

The embed maker says which of the two you have, under the code. Making embed code in the studio gives the version a share link if it doesn't have one yet; see Share links and publishing.

How the player behaves

  • It loads lazily, when the page scrolls near it.
  • It pauses while it's scrolled out of view and plays again when it comes back, so it doesn't spend your visitors' graphics card on something nobody is looking at.
  • Visitors can make it full screen.
  • On hover, the title (when you've left it on) and an Open on VYBE.ART button show along the bottom. Open on VYBE.ART opens the piece's page in a new tab, where they can play it full screen or remix it.
  • When nobody is hovering, a small VYBE.ART logo sits in the corner. It links to the piece's page too.

Leaving the mark off

The logo in the corner and the Open on VYBE.ART button are the VYBE.ART mark. Pro and Studio accounts can leave it off their own pieces' embeds:

  • On your own piece, with Pro or Studio, a Show the VYBE.ART mark switch appears in the embed maker. Turn it off and the code plays the piece with no mark and no link back.
  • On a Free account, the maker shows a VYBE.ART mark row with a link to Pro instead.
  • Anyone else embedding your piece gets the mark.

The player checks your plan each time it's shown, so if your plan ends, the mark comes back on embeds you've already placed. See Token packs and Pro.

Scripting an embed

The page around an embed can talk to the piece: send it inputs and states, set its controls, play, pause and seek it, and hear the events it sends back. That's how an embedded piece can react to buttons on your page, or a scroll. See The embed API for the code.

The inputs and states themselves are set up in the studio's Motion panel. See States and interactions.

Related

Still stuck, or something here out of date? Tell us