loading

Videos not showing, and cannot remove/ edit videos

Hi troubleshooting team,

Here's my info:
Windows 8
Firefox 51.0.1 (32-bit)
https://www.instructables.com/id/Inexpensive-Rubberband-Powered-Helicopter/

This Instructable, and others I've made, was created many UI revisions ago (back when a "Video Instructable" was a creation option).
When I try to load it, a blank space appears where the video should go. There's no way to access the video from the Instructable editor, not even in the HTML. Also, the title image doesn't appear.

This appears to only be an issue for Firefox on Windows. I've tried Chrome, Firefox, and Safari on OSX (those work) and MS Edge on Windows (also works). Haven't tried Chrome on Windows.

I'd like to know how to be able to remove the video so I can just add YouTube's html code.

This is occurring with several of my Instructables. I was alerted to this issue by another user who noticed that a video seemed to be missing, so I feel confident that it's not caused by an issue with my PC.

Thanks for looking into this!

sort by: active | newest | oldest

The symptom you are experiencing is the result of Instructables moving to a secure HTTPS service (which is good thing) and the video content in question being linked to a HTTP address (which is the problem). Though it was perfectly fine at the time you posted I'ble, the goal posts have since been moved.

By default recent versions of Firefox and Chrome blocks what is known as mixed active content, this is a security measure to prevent "man-in-the-middle" attacks. This is why it works in some browsers but not in others. The browsers it works in are basically less secure (You've stated that it works in Chrome and Firefox on OSX, maybe those are not the latest versions available).

In the first image I've attached it shows the I'ble (in Firefox) with the web developer view enabled, allowing me to inspect the source code. It clearly shows the reference to the YouTube video using HTTP. In the second image I've used the web developer tool to change the URL to HTTPS, which then loads the video as expected. This proves that the issue is definitely the browser blocking the content due to mixed active content filtering.

To fix it you need to change the embedded URL for the YouTube video from "http://..." to "https://..." within the I'ble editor.

example_1.jpgexample_2.jpg
LanceMakes (author)  ThirdEarthDesign3 months ago

Hi,

Thanks for your thorough and prompt reply. I looked at the developer code and found the section you were referring to. After clearing my cookies, the video loads correctly. Great!

Looking ahead, I'm planning on updating this video soon. Would it be better to copy the content from this step, paste it into a new step & embed the video using YouTube's html, then delete the old step? Seems cleaner than fiddling with the code in developer mode.

Thanks again!

Please note that when you change the URL in the browser's developer view, only you will see the change! I used it as an example to prove the HTTPS / HTTP mixed active content as the cause of the problem, it won't fix it for everyone.

To resolve this properly the embedded video URL will need to be changed from the Instructables editor. As the video is also your title image, I wouldn't expect the code to be in the HTML/Text editor view. You need to remove the image from the editor then re-add it with the correct video URL (illustrated below).

To remove the image, hover over the thumbnail then click the X at the bottom right, it will prompt for confirmation then it will be removed.

To add, simply click Add >> Video, then copy and paste the YouTube video path. The URL to your video is:

https://youtu.be/cIbGWDM3F6o

If for any reason you don't see the thumbnail of the image to remove, this may be because it was created in an older version of the Instructables Editor, which is something I have no experience of. If this is the case you could try just adding the video anyway, hopefully it will just replace the existing one.

If you're still having problems I suspect Instructables staff will need to assist you.

remove.jpgadd.jpg
LanceMakes (author)  ThirdEarthDesign3 months ago

I tried your suggestion of deleting the title image, re-uploading it, and embedding the video again. Seemed to work - thanks!

Downunder35m3 months ago

Had a similar problem with images in one of my ibles, maybe other are affected too, not sure.
Image were hosted externally and although the actual link works fine in all browsers the Ible only showed a blank space.
Had to upload the images to my collection here to make it work.

As for the links, change to HTML mode and do a text search with the browser for "HTTP" "youtube" or whatever is certainly included in all your video links.
The HTML editor is messy and it is very easy to overlook links there.
If you see a blank space with a frame around it then there will be a link in the HTML view for sure.

I guess it is a problem with HTTPS here and linking to external HTTPS sources for links.

LanceMakes (author)  Downunder35m3 months ago

Thanks for your input. I took a look into the HTML mode, but the embedded YouTube code wasn't present there. I ended up finding it in the developer view, as ThirdEarthDesign suggested.