Executive Pro Slider

[AshleePalmer]

I have read through a few of the previous posts and cannot seem to find the answer to my questions. I would like to add a video that has already been added to my media in the primary home slider area... not the call to action area. I have tried removing the responsive slider widget and adding a text widget with this:

Please help.

http://tuckerleadershipgroup.com

[Tim Squires]

Hi,
What format is your video in? Is it youtube video or vimeo, or similar?
Cheers,
Tim

---

timsquires.com.au

[Tom]

Hi Ashlee,

It looks like you omitted some detail in your posts after " with this:". Assuming that this is the video URL, you should first Enable shortcodes in widgets, then use the WordPress Video Shortcodein the text widget to link to the uploaded video.

Something like:
[video width="1140" height="455" webm="http://tuckerleadershipgroup.com/wp-content/uploads/2015/01/your-video-file.webm"][/video]

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[AshleePalmer]

You two gentlemen are super awesome and amazing. I was able to use the information you gave Tom! IT WORKS!!!!! I do have a quick question. The video is larger when playing than the space I've provided for it...

[video width="1140" height="375" webm="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/TLG-Introduction-Ray-Tucker.wmv"][/video]

Is there a way to fix this?

[Tom]

Yes.

The aspect ratio of your video means that, at 375px height, the width can only be 666px. To center the video in the 1140px widget area, add this CSS snippet to the bottom of your child theme stylesheet:

.wp-video {
	margin: auto auto;
}

The video preview is simply a black video placeholder. See the shortcode details about using a "poster" image placeholder to correct this:

<strong>poster</strong>
(string) (optional) Defines image to show as placeholder before the media plays.

This allows you to specify the exact image that appears front and center on your home page, instead of using the image determined by the video source, which may be less appealing, not be on-message or not incite call-to-action.

You should end up with something like:
[video width="666" height="375" webm="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/TLG-Introduction-Ray-Tucker.wmv" poster="http://fakeimg.pl/666x375/"][/video]

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[AshleePalmer]

Tom, you are amazing. Answering my questions before I even pose them!!! I would like clarification on the "poster" instructions. I don't completely understand. When I use your example above... it works. Its in there now. Though when I insert my own link, it doesn't work.

[video width="666" height="375" webm="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/TLG-Introduction-Ray-Tucker.wmv" poster="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/666x375.png/"][/video]

Should I be modifying the plugin?? Choose a different image? And thanks so much for your help and patience!

[Tom]

Grrr. my !@#$%syntax! (and/or keyboard skills) Sorry about that.
(theres's no plugin here)

Instead of "webm", use "src".
Don't use trailing slash after image URL.

So:
[video width="666" height="375" src="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/TLG-Introduction-Ray-Tucker.wmv" poster="http://www.tuckerleadershipgroup.com/wp-content/uploads/2015/01/666x375.png"][/video]

(works on my localhost install of Exec Pro.)

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[AshleePalmer]

YOU'RE AMAZING!!!!!!!!!!!!!!!!!!!!!!!!!

[Tom]

Have fun with your project!

---

Choose your next site design from over 350 Genesis themes.
[ Follow me: Twitter ] [ Follow Themes: Twitter ] [ My Favourite Webhost ]

[Author]

Posts