Author Options:

Problem Embedding Vimeo Video, and a workaround Answered

In the Intro section of my first Instructable I have a Vimeo video embedded in it.  I found that I could not get the video embedded with the normal editor.  When I would go through the normal embedding process, the editor would show nothing where I embedded the video, both in the editor and in preview.  I tried both giving it the full embed code (with <iFrame> tags) and just giving it the video URL.

The workaround is to use the new editor.  In the new editor, I can embed the video, and the video shows up after I save.  But if I click on the Edit button to enter the normal editor, the video is gone again.

Here are the 5 pieces of data you ask people to include in a bug report:

1. I'm running Windows 7 SP1 64-bit on a machine with an i7 processor and 8GB of RAM.
2. I'm using the Chrome browser, version 30.0.1599.101 m
3. The project I originally ran into this on is Old-School Arduino MIDI Sequencer, but I've created a simpler one to demonstrate the bug, called Bug #1.
4. Sorry, I didn't get screen shots
5. Steps to replicate:

a) Create a Step-By-Step Instructable
b) After giving it a title and a line of text, click on the filmstrip icon to embed a video
c) In the box that comes up, insert the following embed code:

<iframe src="//player.vimeo.com/video/78492158" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

The editor will show an iframe box.  (I've tried several variations on the iframe embed code, and none of them worked for me, even the simplest one with just the source URL.)

d) Click the Save Now button.  The iframe box is now gone.
e) Add some photos (so it will allow you to publish), and publish the Instructable.  The video does not appear in it.
f)  Click Edit, and you will see the video is gone.
g) Click Try The New Editor! and click on the Intro step.
h) Click on +Embed
i) In the dialog box that comes up enter:


Click on Preview, and then Embed.  An iframe box will show in the editor.
j) Click on Save, and then view the Instructable.  It will include the video, which works with no problems.
k) Click Edit.  The standard editor does not show the iframe box.  Click Save Now.
l) View the Instructable.  The video is gone.


Seems that this is still an issue. I too have copied the iframe embed code from Vimeo and still can't get it to save to the 'ible either.

Any update on this?

Thanks for all the detail of this.
The method you are showing in both the new and the old editor is correct. But I can't recreate this bug.

Do you have any script blocking add-ons running (like AdBlock, GreaseMonkey, or LastPass)? These can have weird results when using our page.

Nope, I'm using a vanilla version of Chrome, and no add-ons. I looked at the Chrome settings page, and I didn't see any settings to block or affect javascript. The only "extension" I see when I look at Chrome's extensions is Google Docs, which I don't use, but it looks like Google enables it by default.

I had some problems, but I was able to embed using the New Editor. Whenever I edit the instructable with the old editor, the video disappears. Does that answer your question?

Using the old editor, I am able to insert the Vimeo iFrame. Can you please try starting a new Instructable, using the old editor, and try again?

This may be moot as the new editor is set to supersede the old one.

I'm having the same problem. I started a new step-by-step instructable, titled Bug #1-2. I type in one sentence, hit the carriage return twice, then I click on the filmstrip icon. In the dialog I insert this code:

When I insert it, an iframe box appears. Then I click Save, and the iframe box disappears. When I look at it again (navigating from Drafts), the iframe is still gone.

It removed the iframe code that I listed in my reply!