Blogging Experiment

Adding Embed Video Code to an HTML Image in WordPress

Published August 12th by Kyle in Website/Blog Design, WordPress Wednesdays 12

Mouthful of a title, huh?

I don’t know about you, but I appreciate the details site owners take when creating and releasing content. Anyone can write text, almost anyone can add an image, and fewer yet can embed a video. You’re going to be leaps and bonds ahead of everyone if you actually embed a video IN an image. Whether you want to brand video with your logo, incorporate a design element, or do any number of other things, this is a great trick to know (and we’ve tailored it to WordPress).

It’s important to remember that when you add content to your site, do it in a way that makes your brand stand out from the “norm” in your industry or profession. More specifically, take the time to add as many unique features to your material, website, or blog so people notice right away that there is something “different” about your site. The internet is full of “me too” bloggers who rehash the same information you can find on countless other websites or blogs. Beyond just finding your online voice, this is about setting yourself apart because you think to take care of the details (however small they may be…they still matter).

Adding Embed Video Code to an Image in WordPress

A few weeks ago, I was working on a site for my 19 month old little boy, and I wanted to find a way to include a video we had taken into a picture. I searched online and found this great video tutorial on adding embed video code to an image. Watch it first, then come back here.

The Finished Product

Let’s Look At The Code

Once the html page is created, there is a slight modification you have to make to the code in order for it to look right in WordPress. Below is the code generated from Dreamweaver. This is what you would upload to a website (not run on WordPress) to have the video embedded on an image.

With WordPress however, I found that I needed to merge the tables (slices) 2-4 into one table. Here is the code I used to get the embed video on the black BlogEx video image you see above.

You only need the table data from the html page Dreamweaver created for you when publishing to Wordpress. If you try to upload the html file just as Dreamweaver created it it won’t look right. Because remember, they created an entire html page, while with Wordpress, we are just wanting to include it IN a page or post. Again, it’s all spelled out in the code above, so feel free to reference that as needed.

TAGS: ,

Comments

  1. marcus August 13th, 2009

    Thanks. This is a really neat trick. It really makes a video stand out in your blog posts.

  2. Free Arcade Games August 14th, 2009

    So this is the new BloggingExperiment theme :D Sorry, but I actually like the old one a lot better. Both are kind of plain, but I liked the old one better.

    As for embedding video codes into images…I have never even seen that being done before. lol.

    -Mike

  3. Kyle August 15th, 2009

    @Mike – I’m a little confused about the lol. Are you serious that you’ve never seen it done before, or are you saying it’s not something worth knowing?

  4. Foto Video September 2nd, 2009

    Yeah the trick is nice. I never did this kind of vdeo. Maybe i will try to work as well as you did, who knows. Anyway thanks for the advices and tips.

  5. door knobs September 4th, 2009

    This is something strange for me but its too interesting for doing it in wordpress.

  6. firewall configuring September 5th, 2009

    Amazing content. This will give a brief information about word press and will help as a guide to newbies. Keep it up. I really like this type of articles.

  7. Wayne Key September 6th, 2009

    As a writer learning html (rather than a coder learning to write) thanks for the info above. Do you have any suggestions on good resources for learning html, css and the like?

  8. Paul October 2nd, 2009

    I watched that video for 1:38 seconds and gave up. Nothing happened! Do you have a clue about what your visitors want? Jeez! Give them what they want, and integrate what you want into that (sales – duh!). If after 1.5 minutes nothing happens, your visitors will get bored. Stop indulging. What you find “pretty” others might not.

  9. Mason October 20th, 2009

    Paul, don’t be a Douche Bag. obviously the post isn’t about the content of the video but its functionality. Do you even have a clue what this post was about?

  10. Phil October 21st, 2009

    Spelled out great.

    However, it doesn’t work for me. If I place the code straight into the HTML window inside of the Wordpress page dashboard it just gives me blue boxes with question marks on the page.

    Any ideas?

    Thank you again for posting this article.

    Phil

  11. Kyle October 23rd, 2009

    Phil, were you copying the code from the second text box?

  12. Dejan March 8th, 2010

    Hi Kyle,

    is it possible to add picture inside the video ?
    Some videos have black screen until you click play, so I want them to show picture (not being black).
    btw, I’m asking about hosted videos, not youtube or related site embed videos

    Thank you,
    Dejan

    btw nice trick :)

Add a Comment