[Daniel SParticipant]

Hi,

I have been supplied the video links for responsive video I am suppose to be embedding, but I have discovered that the video is all from a third party provider called Wistia. Have you heard of them? I have tried to embed their videos into my responsive lightbox, but it’s embedding the video page and not the video itself. To see what I mean, go here: http://www.inbluetesting.com/observatory/apartments-rooms/one-bed-ocean-view/ and click on the video thumbnail. You will notice that the “Travelreel” video page comes up and not the embedded video itself.

The link I originally received was this: https://travelreel.wistia.com/medias/0qaih13kzo

The code I have used to try and embed it is here:
[text_output][image class="our-rooms" src="http://www.inbluetesting.com/observatory/wp-content/uploads/2014/12/1-Bed-Ocean-View.jpg" alt="Video" type="thumbnail" link="true" href="//travelreel.wistia.com/medias/0qaih13kzo" lightbox_video="true" title="Video"][/text_output][/vc_column][/vc_row][vc_row][vc_column width="1/1"][lightbox selector=".our-rooms" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"]

When I asked for the embed code, I received the following:
<a class="travelreel" data-thumbsize="custom" data-button="default" href="#bshfwv&960&278">Overview</a><script type="text/javascript" src="http://travelreel.com/embed.js"></script>

Can you please help me to embed the video properly please?

Your help will be greatly appreciated.

Dan

[Daniel SParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Daniel,

Thanks for writing in!

We cannot provide support for 3rd party, however it seems you’re directly adding the link of the video page to the lightbox while as far as I know, you should add the video embed code or .mp4 URL. So I’d advise that you ask your video providers to give you either the embed URL or .mp4 video URL.

The same thing is for youtube and vimeo, that is, if you directly add the URL of the video page, the lightbox will not open the video but the entire page.

Hope this helps. 🙂

Thank you.

[John EzraMember]

Hi Daniel,

Who gave you the embed link? It’s for another video.

Wistia is a powerful video host, it enables customer interaction by adding extra features for example the code you were given will pop up a button on the video that when clicked will take the view to the booking page.

Your client may have used Wistia as a platform for such features. Having said that this is one of the reasons why the embed code isn’t as simple as other hosts like YouTube and Vimeo.

However they have good documentation as well. I would suggest you get access to the wistia login yourself and use their embed customizers to make it easier on yourself.

Now about putting the video properly on your page, since Wistia isn’t integrated with X this really isn’t something we can support you with.

However, since we really value our users we try to do give what we can. Here’s a start on how to do it for this video.

I checked the video link https://travelreel.wistia.com/medias/0qaih13kzo . While inspecting this page, I found the link to your video file in question.

you can use this code to play via html5 player.

[vc_row][vc_column][text_output][image class="our-rooms" src="http://www.inbluetesting.com/observatory/wp-content/uploads/2014/12/1-Bed-Ocean-View.jpg" alt="Video" type="thumbnail" link="true" href="https://embed-ssl.wistia.com/deliveries/aa440cb398a10be0fb4f134dd9622a9194537486/file.mp4" lightbox_video="true" title="Video"][/text_output][/vc_column][/vc_row][vc_row][vc_column width="1/1"][lightbox selector=".our-rooms" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"][/vc_column][/vc_row]

Note this is the video direct link : https://embed-ssl.wistia.com/deliveries/aa440cb398a10be0fb4f134dd9622a9194537486/file.mp4

or you can use this code to use the wistia player.

[vc_row][vc_column][text_output][image class="our-rooms" src="http://www.inbluetesting.com/observatory/wp-content/uploads/2014/12/1-Bed-Ocean-View.jpg" alt="Video" type="thumbnail" link="true" href="https://fast.wistia.net/embed/iframe/0qaih13kzo" lightbox_video="true" title="Video"][/text_output][/vc_column][/vc_row][vc_row][vc_column width="1/1"][lightbox selector=".our-rooms" opacity="0.875" prev_scale="0.75" prev_opacity="0.75" next_scale="0.75" next_opacity="0.75" orientation="horizontal" thumbnails="true"][/vc_column][/vc_row]

This link om the code above takes you to the video using the Wistia player: https://fast.wistia.net/embed/iframe/0qaih13kzo

However the best way to do this is use a code like the following which I hacked together using an example from one of their documentations and an image from your original code.

<a href="//fast.wistia.net/embed/iframe/0qaih13kzo?popover=true" class="wistia-popover[height=540,playerColor=3ea9f5,width=960]"><img src="http://www.inbluetesting.com/observatory/wp-content/uploads/2014/12/1-Bed-Ocean-View.jpg?image_play_button=true&image_play_button_color=3ea9f5e0&image_crop_resized=300x169" alt="" /></a>
<script charset="ISO-8859-1" src="//fast.wistia.com/assets/external/popover-v1.js"></script>

Pop that code into your page and it uses a Wistia script to pull a lightbox not native to X. So again I suggest getting access to the wistia dashboard so you can explore what’s best:

Here are some links to docs you might want to check out:

http://wistia.com/doc/embedding

http://wistia.com/doc/embed-options

http://wistia.com/doc/wordpress

http://wistia.com/doc/construct-an-embed-code

There you have it, if you have to build multiple videos on your site, hacking it together is troublesome, get access and make your life easier, and use the powerful tools that platform offers.

Hope this helps!

[Daniel SParticipant]

WOW… Thank you! This is the most helpful support team I have ever encountered in all my years as a web designer. You guys rock!

[RadModerator]

Thanks Daniel! And you’re always welcome 😉

[Daniel SParticipant]

My client has changed the video code again, because they are going through a company who can put a “Book Now” button on the video. Go to this page and click on the video thumbnail in the body copy (not the video thumbnail in the widget sidebar on the right hand side). The code they supplied me is very different to the code I was previously using.

Here is the code I was previously using:
[image class="our-rooms" src="http://www.inbluetesting.com/observatory/wp-content/uploads/2014/12/Ocean-View-Hotel.jpg" alt="Video" type="thumbnail" link="true" href="https://fast.wistia.net/embed/iframe/g510wneaaq" lightbox_video="true" title="Video"]

Here is the new code I have to use:
<a class="travelreel" data-thumbsize="custom" data-nofooter="1" data-button="default" href="#bkdohb&159&95">1 Bed Ocean View</a><script type="text/javascript" src="http://travelreel.com/embed.js"></script>

The downside about the new code is that I lose the thumbnail border. Is there any possible way I can add code to this new code that will put the border on the video thumbnail?

Many thanks for your help.

Dan

[Daniel SParticipant]

Also, how do I add a caption for the video thumbnail?

[Daniel SParticipant]

This reply has been marked as private.

[ZeshanMember]

Hi Daniel,

Thanks for posting in!

#1: Regarding the video border, you can try adding default image CSS class to the anchor tag, so your code will become:

<a class="travelreel x-img x-img-link x-img-thumbnail x-image-auto-height" data-thumbsize="custom" data-nofooter="1" data-button="default" href="#bkdohb&159&95">1 Bed Ocean View</a><script type="text/javascript" src="http://travelreel.com/embed.js"></script>

After that, add following under Custom > CSS in the Customizer:

.x-image-auto-height {
   height: auto !important;
}

#2: Regarding the caption, regretfully, at this time I am not entirely certain about it. If you wouldn’t mind providing us with a little more clarification on what it is you’re wanting to do (a link to a similar example site would be very helpful, or perhaps some screenshots), we’ll be happy to provide you with a response once we have a better understanding of the situation.

Thanks!

[Daniel SParticipant]

Perfect! Thank you!

[RubinKeymaster]

Let us know if you need anything else!

[Daniel SParticipant]

Actually, I do need something else. 🙂

I’ve discovered that the video thumbnails are not responsive. For example, go to the home page here: http://topm.temp5.straliaweb.com.au and scroll down to where the “Our Videos” section is. On my screen, it looks perfect (see here: http://topm.temp5.straliaweb.com.au/wp-content/uploads/2015/01/Screen-Shot-2015-01-07-at-1.22.01-am.png ), but when you reduce the window size the video thumbnails stay the same size and look out of proportion to the other elements that are responsively reducing in size. Try resizing the browser window to see what I mean.

For each of the videos, I am using a simple text box with the following code (as for the first video on the left hand side):

<a class="travelreel x-img x-img-link x-img-thumbnail x-image-auto-height" href="#bshfwv&330&160" data-thumbsize="custom" data-nofooter="1" data-button="default">Overview</a><script src="http://travelreel.com/embed.js" type="text/javascript"></script>

So, the code appears on the page in the following context:

[vc_row padding_top="0px" padding_bottom="0px" border="none"][vc_column width="1/1"][icon_list style="font-size:36px; color:#345489; margin-bottom:0;"][icon_list_item type="film"]<a href="http://topm.temp5.straliaweb.com.au/gallery-beach-cam/video-gallery/">Our Videos</a>[/icon_list_item][/icon_list][/vc_column][/vc_row][vc_row padding_top="0px" padding_bottom="0px" border="none"][vc_column width="1/3"][gap size="-2px"][text_output]<a class="travelreel x-img x-img-link x-img-thumbnail x-image-auto-height" href="#bshfwv&330&160" data-thumbsize="custom" data-nofooter="1" data-button="default">Overview</a><script src="http://travelreel.com/embed.js" type="text/javascript"></script>[/text_output][/vc_column][vc_column width="1/3"][gap size="-2px"][text_output]<a class="travelreel x-img x-img-link x-img-thumbnail x-image-auto-height" href="#rhdrxz&330&160" data-thumbsize="custom" data-nofooter="1" data-button="default">Overview</a><script src="http://travelreel.com/embed.js" type="text/javascript"></script>[/text_output][/vc_column][vc_column width="1/3"][gap size="-2px"][text_output]<a class="travelreel x-img x-img-link x-img-thumbnail x-image-auto-height" href="#bkdohb&330&160" data-thumbsize="custom" data-nofooter="1" data-button="default">Overview</a><script src="http://travelreel.com/embed.js" type="text/javascript"></script>[/text_output][/vc_column][/vc_row]

Do you know how I could get these video thumbnails to be responsive?

Many thanks.

Dan

[ChristopherModerator]

Hi there,

Thanks for writing in! It sounds like you might be having an issue with a third party plugin or script. Regretfully, we cannot provide support for third party plugins or scripts as our support policy in the sidebar states due to the fact that there is simply no way to account for all of the potential variables at play when using another developer’s plugin or script. Because of this, any questions you have regarding setup, integration, or troubleshooting any piece of functionality that is not native to X will need to be directed to the original developer.

Thank you for your understanding.

[Author]

Posts