Solved

How do I embed a video inside a graphic on a Wordpress blog site.

Posted on 2011-03-18
9
725 Views
Last Modified: 2012-05-11
On a Wordpress blog:
Have uploaded a graphic:  http://www.forcomicsonly.com/wp-content/uploads/2011/03/FCO-Landing-1.jpg

This graphic has a picture of a movie screen into which I want to insert/embed/overlay (whatever) a video file.
I have uploaded the video file:  http://www.forcomicsonly.com/wp-content/uploads/2011/03/MSB-FCO-Intro.m4v

When the page displays, the video should appear to be showing in the little window in the picture. The user, should be able to start and stop the video as usual.

Can anyone help me, please and thank you.

0
Comment
Question by:T4Pam
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 4
9 Comments
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35168037
I was able to embed it by converting it to a swf file. I use FFactory which is free: Format Factory Download

Then I uploaded it to my WordPress directory and opened it in firefox to get the URL (just to make sure). I will leave it up so you can test it on your site. Just use the code I send you and it should work.

Add to the header.php, or wherever you want outside of the loop:

<div id="video">
<div class="video1"><embed type="application/x-shockwave-flash" src="http://wordpressexpression.com/hw/MSB-FCO-Intro.swf" name="plugin" height="100%" width="100%">
<div id="inline-1" class="c1"></div>
</div>

Open in new window


Then add this CSS to your style.css file:
.video1 {
width: 346px;
height: 210px;
display: inline-block;
position: relative;
margin-top: 190px;
margin-left: 90px;

}
#video {
display: block;
width: 500px;
height: 600px;
position: absolute;
background: url(http://www.forcomicsonly.com/wp-content/uploads/2011/03/FCO-Landing-1.jpg);
}

Open in new window


Let me know if you have any questions.
NOTE: It will autoplay without controls. For a player you can search the WordPress directory to find one for your.
0
 

Author Comment

by:T4Pam
ID: 35175808
I added the css code to the style.css file.  
I put the video code you provided into the embed video block on the Wordpress page.
I updated and viewed the page.  I do see the video embedded into the graphic.  But all the sidebar stuff is now not visible.

Just to test whether I had done things correctly, I went back and deleted the css code from the style sheet. It appeared to make NO difference whether it was there or not.

I do need to have the video in a player so it can be stopped/started. I searched WP but can't find anything that looks like a video player.  Another video clip on the site is embedded in something...  code looks like this:

<div id="evp-c6c11d470ddc47ed5104fa9abcd39ea9-wrap" class="evp-video-wrap"></div><script type="text/javascript" src="http://americascomedy.evplayer.com/framework.php?div_id=evp-c6c11d470ddc47ed5104fa9abcd39ea9&id=ZmNvLWludHJvLWRyYWZ0LTEubTR2&v=1299719602&profile=default"></script><script type="text/javascript"><!--
_evpInit('ZmNvLWludHJvLWRyYWZ0LTEubTR2[evp-c6c11d470ddc47ed5104fa9abcd39ea9]');//--></script>
I think the second part of this is a separate question and I will frame it so to award appropriate points.
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35179690
You can get the code for your video by placing it in your upload folder, then access via your web browser. You can then right click and choose view source. Copy the part of the source code that has your video. You should then be able to use it in your uploader.

Let me know if you need anything else.
0
Why Off-Site Backups Are The Only Way To Go

You are probably backing up your data—but how and where? Ransomware is on the rise and there are variants that specifically target backups. Read on to discover why off-site is the way to go.

 

Author Comment

by:T4Pam
ID: 35183432
Thank you.  I am still finding two problems w/this solution:

1st, I can't get it to display property. After following all instructions, converting my own video to swf, and making changes to style sheet, I get the video inserted corrected into the graphic BUT, the sidebar is covered in blue background. Can't see the entire page, just the video graphic and inserted video.  So I'm doing something wrong with the solution or....

2nd, I do not understand the most recent comment re uploader. I have uploaded the converted video. I just need to get it into a player so it can be stopped/started by the user.  I don't want it on YouTube. Another video on the same site was wrapped in evplayer but with a lot of additional codes and java script. Is it not possible just to get the player wrapper around the video?
0
 
LVL 23

Accepted Solution

by:
jeremyjared74 earned 500 total points
ID: 35184657
Is it not possible just to get the player wrapper around the video?

Yes, you can download JW-Player for this, but it has a small JW logo in the top corner if hovered. There are other solutions like disabling the WPAUTOP so WordPress will stop disabling the code for SWF player.

About the background being messed-up, you may want to position it somewhere else on the theme. It sounds like it may be in a bad spot. There may also be a <div> tag left open inside of your theme. You can try adding an extra div before or after the swf to see if it fixes it.
http://wordpress.org/extend/plugins/wp-jw-player/installation/
0
 

Author Closing Comment

by:T4Pam
ID: 35185167
I knew too little to take this on but with persistence and the help of an Expert, by jove, I think I've got it.  Thank you very much
0
 
LVL 23

Expert Comment

by:jeremyjared74
ID: 35185232
Great I'm glad I could help. Good luck with everything.

Was their a missing div tag?
0
 

Author Comment

by:T4Pam
ID: 35185337
Yes, apparently. I added / moved until it worked. Final code:

<div id="video">
<div class="video1"><embed type="application/x-shockwave-flash" src="http://wordpressexpression.com/hw/MSB-FCO-Intro.swf" name="plugin" height="100%" width="100%"></div>
<div id="inline-1" class="c1"></div>
</div>

0

Featured Post

Creating Instructional Tutorials  

For Any Use & On Any Platform

Contextual Guidance at the moment of need helps your employees/users adopt software o& achieve even the most complex tasks instantly. Boost knowledge retention, software adoption & employee engagement with easy solution.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
Find out what you should include to make the best professional email signature for your organization.
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…
The viewer will learn how to count occurrences of each item in an array.

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question