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.
Author: Kyle
Owner of BloggingExperiment (BLOGEX), long-time Clickbank super affiliate, buying and selling website investor, and very proud husband and father!
Best Deal in WordPress
Top WordPress Themes
Number 3: WooThemes
Number 2: Elegant Themes
Number 1: ThemeForest
Thanks. This is a really neat trick. It really makes a video stand out in your blog posts.
So this is the new BloggingExperiment theme
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
@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?
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.
This is something strange for me but its too interesting for doing it in wordpress.
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.
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?
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.
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?
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
Phil, were you copying the code from the second text box?
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
Hi, this did not work for us. Are you able to check this please?
Here’s the image we wish to use:
http://iktara.us/wp-content/uploads/2010/04/vintagetv.gif
Here’s the video we wish to embed “within” the image above:
http://www.youtube.com/watch?v=uPEYWpbe_H0
Thanks for any help!
That’s a great trick! Thank you very much for such valuable content.
Please keep up the great work.
Kind regards, John
Please help!
I’ve done as per the video by creating the HTML file but surely don’t I need to upload the images to WordPress in order for the HTML code to work?
Really appreciate any help at all!
To continue from previous post do i need to upload the segmented image files to my server and then use the code? In other words the HTML part will reference the segmented images on my server?
Many thanks in advance