Portfolio Pages - Video Container

[AshleyF]

I have now created a portfolio page and I wanted the video to appear inside an embed container (like the image thumbnail style). On my main pages I wrap the video iframe code inside

[x_video_embed]

and

[/x_video_embed]

But that doesn’t seem to work with portfolio (where the video iframe) is entered in the video portfolio item settings

[Prasant]

Hello @ocduk,

Thanks for asking.

Can you please share the exact page URL? You also have the option to use custom CSS to mimic the look and feel:

.video_embed{
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 2.5%;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);

} 

Please replace video_embed class name as per your requirement.

That being said you can also take a look at following page for more information on the shortcode.

http://demo.theme.co/integrity-1/shortcodes/responsive-video/

Thanks.

[AshleyF]

Thanks, I think the problem is how I apply the CSS because of where the video embed code is in the portfolio settings, I will add a link to a page example.

[rad]

Hi @ocduk,

Are you referring to the featured section for video? It’s the only vide that I see from your site and it works fine. And if it’s what you’re referring, you don’t need to wrap your video with that shortcode. You can directly add the iframe embed of your video or use self-hosted video. Or maybe the initial video issue is different? Would you mind providing more clarification about the video issue?

Is it the black bars or just wishes to display an image in the main page instead of video?

Thanks!

[AshleyF]

Hi Rad,

Yeah I added the [x_video_embed] and [/x_video_embed] around the iframe embed code, but if you look at the page I shared the link with, you will see the embed code seems to break.

[thai]

Hi There,

You don’t have to include the [x_video_embed] shortcode to Embedded Video Code field, just add the iframe code:

Regards!

[AshleyF]

Hi,

Sorry yes, what I mean is I am trying to get the video to appear on screen with the border CSS, but I cant seem to find a way to do that?

[jade]

Hi there,

Please follow the suggestion by @thai then to add a border to the video on the portfolio page, please add this code in the Global CSS:

.single-x-portfolio .entry-featured .x-video {
    border: 1px solid #ddd;
    border: 1px solid rgba(0,0,0,0.15);
    padding: 2.5%;
    background-color: #fff;
    border-radius: 2px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);    
} 

Here are some links for the code above:

• How to write a CSS Selector - https://www.w3schools.com/cssref/css_selectors.asp
• CSS Border - https://www.w3schools.com/css/css_border.asp

Hope this helps.