How to Embed Images and Videos in Your Comments

While occasionally a bit wonky, our comment engine, IntenseDebate does have a few nifty features. Among them, the ability to embed images and YouTube videos. Jump for the how to.

Images:
This is easy if you know HTML, complicated otherwise…because you just do a standard HTML image code. It looks like this:
<img src="IMAGE URL" width="600">
To embed the picture above, you’d do:
<img src="https://hooniverse.com/wp-content/uploads/2010/08/Success-Kid-Image-Embed-Accomplished.jpg">
Do not use the forum-style BBCode [image][/image] square-bracket stuff, because it won’t work. The width=”600″ bit is only necessary on big pictures, those wider than the comment field. We’d like to be able to see all of your pretty picture at once without scrolling.
For the uninitiated, “IMAGE URL” must be the URL of an image, not the page it’s on. It must end in “.jpg” or some other image file format and be hosted on the interwebs, not your computer. I.e., if you put in “C:\Documents and Settings\mad_science\My Documents\My Pictures\jeff puking.jpg” it will not work. The easiest way to get an image URL is to right-click the image, then select “copy image URL”, “Open image in new tab” or “Properties” and you’ll see the image URL. Go ahead and try it on the image above. Success Kid will let you know if you’ve succeeded.
A bit of “netiquette”: this whole process of embedding an image hosted somewhere else is known as hotlinking. If you hotlink someone else’s image for our comments, the courteous thing to do is include a link back to the page where you found it.
A note on flickr-hosted images: in the new flickr interface, at the “Share This” menu at the top of an image, select the option “Grab the html” and copy/paste that whole thing in. It makes the picture and link-back all in one. Other photo hosting sites have similar options.
YouTube Videos:

There’s a little button on the comment interface, into which you paste the youtube URL. YouTube’s “embed this video” doesn’t work because we don’t allow objects to be embedded. Aside from sounding uncomfortable, it leaves the door open for all kinds of weird stuff to show up.

Currently, YouTube videos are the only ones you can embed. For Vimeo or Streetfire or whatever just drop the link to the video in, and IntenseDebate will automatically turn it into a clickable link.

Leave a Reply

Your email address will not be published. Required fields are marked *

The maximum upload file size: 64 MB. You can upload: image, audio, video. Links to YouTube, Facebook, Twitter and other services inserted in the comment text will be automatically embedded. Drop files here

153 responses to “How to Embed Images and Videos in Your Comments”

  1. muthalovin Avatar

    That little guy just looks so damned happy!
    <img src="http://home.comcast.net/~paul810/raptor1.jpg?ei=Ek9YTLCWBsO88gb23p39Cg&biw=1280&bih=804"&gt;
    YAY for images!

      1. renatopro Avatar
        renatopro

        <img style="-webkit-user-select: none; cursor: -webkit-zoom-in;" src="http://i.imgur.com/JsL04sJ.jpg&quot; width="318" height="425">

  2. chrystlubitshi Avatar

    thank you for being so much more friendly than all other internal combustion engine (and other engine) sites…… but i will continue to post links because i often times peruse the wares via mobile devices, leeching off of "un-protected" wireless networks.. or my cell network… embedded videos and pictures (while greatly appreciated and enjoyed!!!!!) make for slower loading times…
    no worries all.. continue forth. just a note.
    i love you all… and you service obscure gearheads of all sorts much better than any other site!!!

  3. engineerd Avatar

    Was this prompted by me (now I realize) dumb question yesterday?
    Here, enjoy some '70s Bathurst winning.
    [youtube grcjB4MQxWY http://www.youtube.com/watch?v=grcjB4MQxWY youtube]

  4. Buickboy92 Avatar

    Hurray!
    <img src="http://i512.photobucket.com/albums/t326/buickboy92/1933PackardTwelve1006DeitrichV-Wind.jpg&quot; border="0" alt="1933 Packard Twelve 1006 Deitrich V-Windshield Sport Coupe">

    1. Tim Odell Avatar
      Tim Odell

      Dammit!
      width="500"

      1. Buickboy92 Avatar

        How do I change the width of the image?

        1. Maymar Avatar

          Within the code, just add "width=500" (the quotation marks may not be necessary, but they work for me. It'll look something like …img.jpg" 'width=500" < /a>

    1. austinminiman Avatar

      Oooh… I forgot about that photo set. And I missed it.

  5. scroggzilla Avatar

    <img src="http://farm5.static.flickr.com/4107/4844144826_4157507d7f.jpg&quot; width="500" height="252" alt="64 scca divisional@vir don yenko chevrolet corvette" />
    Hey, the new improved Flickr works…….(end Flickr shilling)

  6. Rust-MyEnemy Avatar

    Cheers for posting this, I had been attempting the old 'lopnik style where you don't close the >.
    I get to look less technologically backwards now!

    1. Jim7 Avatar
      Jim7

      I suck.

        1. Tim Odell Avatar
          Tim Odell

          Victory!

  7.  Avatar
    1.  Avatar
      1. CaptainZeroCool Avatar

        WHO HAS PHONE?

        1. Tim Odell Avatar
          Tim Odell

          I accidentally the comments.

          1. Alex Kierstein Avatar
            Alex Kierstein

            The whole thing?

  8. ZomBee Racer Avatar

    It was either this, or a picture of a pumpkin named "Jeff" puking.
    [youtube 2EetVO6aWGM http://www.youtube.com/watch?v=2EetVO6aWGM youtube]

  9. FЯeeMan Avatar

    Funny, I just rummaged in my collection of bookmarks for my HTML cheat sheet to figure out how to post an image in the Porsche engine thread. That's what I get for reading back'ards…

  10. PapayaSF Avatar
    PapayaSF

    To avoid hotlinking (which may not be allowed by the site hosting the graphic, even if you credit it) and if you don't want to sign up for Flickr or whatever, download the image to your computer and then upload it to a site like Imageshack. It's free, and no registration needed, and they'll give you a URL to use.

  11. HycoSpeed Avatar
  12. HycoSpeed Avatar

    Ooooo that's exciting. Now if I can just figure out how to make my avatar thingy show a picture I will be set. I pretty much only play internet on my phone, and once I got the comments to stop disappearing I figured out how to make a login. Baby steps.

  13. RP Piper Avatar

    [youtube 4jvVCJp429A&feature=related http://www.youtube.com/watch?v=4jvVCJp429A&feature=related youtube]

    1. 80SICON Avatar
      80SICON

      Yay I figured it out!

  14. blackspider3d Avatar
    blackspider3d

    <object width="480" height="295"><param value="http://www.youtube.com/v/grcjB4MQxWY&amp;hl=en&amp;fs=1&amp;rel=0&quot; name="movie"/><param value="true" name="allowFullScreen"/><param value="always" name="allowscriptaccess"/><embed width="480" height="295" allowfullscreen="true" allowscriptaccess="always" type="application/x-shockwave-flash" src="http://www.youtube.com/v/grcjB4MQxWY&amp;hl=en&amp;fs=1&amp;rel=0"/></object></div&gt;

  15. Dr. Fine Avatar
    Dr. Fine

    <object style="height: 390px; width: 640px"><param name="movie" value="http://www.youtube.com/v/MoiYFsrkS4k?version=3&feature=player_detailpage"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/MoiYFsrkS4k?version=3&feature=player_detailpage&quot; type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="640" height="360"></object>

  16. j88s Avatar
    j88s

    sapeca

  17. vroomsocko Avatar
    vroomsocko

    [youtube rpEgQ3b_Ug0 http://www.youtube.com/watch?v=rpEgQ3b_Ug0 youtube]

  18. renatopro Avatar
    renatopro

    <img style="-webkit-user-select: none" src="http://i.imgur.com/v0XAbBI.gif"&gt;

  19. ingmo59 Avatar
    ingmo59

    <img src="http://smileys.smileycentral.com/cat/23/23_34_2.gif&quot; alt="" style="border:0px;vertical-align:middle">

    1. ingmo59 Avatar
      ingmo59

      Thank you !!!!!!!!
      Now I know what to do 🙂

  20. test Avatar
    test

    <img src="IMAGE URL" width="600">
    To embed the picture above, you’d do:
    <img src="http://www.empowernetwork.com/samiam85/files/2012/07/money-cake-1024×768.jpg"&gt;

  21. Schlick51 Avatar
    Schlick51

    <img src="http://i362.photobucket.com/albums/oo69/LordChouunShiryuu/Fullmetal Alchemist/GeneralArmstrongsarespeachlesswhenS.jpg" width="500">

  22. benji Avatar
    benji

    <img src=http://i585.photobucket.com/albums/ss300/pascal_08/penspin.gif>

  23. lol Avatar
    lol

    <img src=http://24.media.tumblr.com/tumblr_m61w1rxrXU1qede7oo1_500.jpg width="600">

  24. eran Avatar
    eran

    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jp <a href="http://ghttp://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg"&gt;” target=”_blank”>ghttp://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">

  25. sasah Avatar
    sasah

    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg <a href="http://_http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg"&gt;” target=”_blank”>_http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">

  26. nehas Avatar
    nehas

    <img src="http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg <a href="http:///http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg"&gt;” target=”_blank”>/http://upload.wikimedia.org/wikipedia/commons/2/22/Turkish_Van_Cat.jpg">

  27. Sleeping Forest Avatar

    things they should make before I die #46

  28. Sleeping Forest Avatar

    giphy.com/embed/ToMjGpn0Si90OyYBtny” width=”480″ height=”270″ frameBorder=”0″ class=”giphy-embed” allowFullScreen><a href="http://giphy.com/gifs/ha-gay-senor-chang-gayyyyyyyyyyy-ToMjGpn0Si90OyYBtny

  29. Kenneth Ketchum Avatar
    Kenneth Ketchum

    wow, really looks like everyone has the hang of it, hahaha

  30. chromastone Avatar
    chromastone

    got it

  31. chromastone Avatar
  32. chromastone Avatar
    chromastone

    [img]https://i.imgur.com/9kTwkww.jpg[/img]

  33. Article60 Avatar
  34. Article60 Avatar
    Article60

    <img src=https://youracademicwriter.com/blog/wp-content/uploads/2021/04/mla-format.png""

  35. JesusMurphy Avatar
    JesusMurphy