How to embed a video in post with featured image?

I wish to post a video in a post (not page) and also use a featured image so it will display as recent post on home page. I tried both standard and video post type and failed. The featured image is not showing up and displays instead: Video source missing. Or in a standard post, the featured image shows up above the video, which is redundant.

Please Help.

Hey Cindy,

The Video post format will show a video in the blog page and you need to use the Video Post Settings. It’s currently empty so you get the Video Source Missing. Please insert your video’s embed code in the Embedded Video Code box.

Hope that helps.

Actually, I have the embed code in the video post code box as you describe, but what shows up is an empty box above the video, no featured image. See this https://www.wangjingwei.org/wp-content/uploads/2019/06/screencapture-wangjingwei-org-chinatimes-chair-2019-06-30-19_49_02.png

I just want the video in the post, with the featured image showing up only as a recent post on the homepage.

Thank you for your help.

Hello Cindy,

To resolve your issue, please do the following:

1.) Edit your post and select “Standard” as the post format instead.
2.) In the Post Settings, please insert “has-video” in the body class field.

3.) And then please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

.single-post.has-video .format-standard .entry-featured {
    display: none;
}

We would love to know if this has worked for you. Thank you.

I did this, but got a blank post with only headline. Can you tell me where to put the code in this standard post? I put it in the excerpt. Also, why does the post editor look this way? The headline is in the middle of the page? Should I be using Cornerstone?

Hey Cindy,

Are you referring to the CSS code? It should only be placed in either Global CSS (Theme Options) or the Content CSS if you’re using Cornerstone.

I just want to add the CSS code Ruenel gave will hide the featured image in all Standard Posts. That is OK if that is what you want. Just keep that in mind because you might want to show the Featured Image in the future and might wonder why it won’t show up.

To your other question:

Click the Edit with Cornerstone button because you built the page with Cornerstone but might have switched to the default WordPress editor.

I also want to add and I’m sorry that I forgot to say that there’s currently a bug with the Video Post Format Embed where if you place the embed code, it will show a non-existing page in the frontend. The temporary work-around for that is to change the double quotes (") in the embed code to single quote (') like the code below:

<iframe width='560' height='315' src='https://www.youtube.com/embed/a34k56h-E' frameborder='0' allow='accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture' allowfullscreen></iframe>

The Video Post Format also will show the video in the blog page and in the featured media section (below the title) in the single post page.

Hope that helps.

I did put the CSS code in either Global CSS already.

  1. When I changed embed code in the video element box to single quotes, it gives me this error message:
    An error occurred. Please try again later. (Playback ID: L43HSEH-CDpPqvlD)
    Learn More

  2. The featured image does not show on the actual post, only the video, but both video and featured image shows on the blog list page, can this be hidden on this page as well?

  3. So in Cornerstone I have to put “has-video” in the “class” box, right? Or do I do this before choosing “Edit with Cornerstone”?

  4. So there is a new look for post and page editors now as in the screenshots I showed? It just looks unresolved and strange, that’s why I asked. This is from the latest update? They look fine in Cornerstone, though.

Thanks.

Hey Cindy,

Yes, I saw that but I pointed that out because you asked where to put the code.

I don’t get this on my end but when I checked, you’re using double quotes.

I changed it to single quotes and the video showed up.

That’s just for testing and proof though. I switched your post back to standard after testing.

The CSS code given was for single post only. If you wish to target the blog list page as well, you need to remove the single post selector in the code so it would be this:

.has-video .format-standard .entry-featured {
    display: none;
}

If that doesn’t help, please give us the URL of your blog list page.

You already placed the has-video class in the Body Class and that is the correct place. It’s not in Cornerstone. It’s under the Post Settings.

That is indeed strange and must have only been happening on your end. There could be something causing that like browser extensions. Anyway, I’m glad that Cornerstone works on your end.

Thanks.

Hi:
Let’s start again. First, I put the CSS code you provided in the theme options CSS global block, using the the one you just gave me: .has-video .format-standard .entry-featured {
display: none;
}

Please check. Now, here are the problems.

  1. If you go to https://www.wangjingwei.org/updates-en/ (main blog list page) you will see the featured image on top of the video for the post https://www.wangjingwei.org/chinatimes-chair/ (viewable only if you log in, our site is live so the post is private) which was built with Cornerstone using classic embed code element with SINGLE quotations, you can check it. The video is black, not showing. When you click on the triangle, error message says:

An error occurred. Please try again later. (Playback ID: OUzNc29aeADNFTta)
Learn More.

  1. I don’t want the feature image to show up on the single post page at all, but only when I use “recent posts” element on the home page, and on the the main blog list page. I don’t want to have feature image on top of the video, only the video to show up.

  2. When you went to page and saw double quotes it’s because otherwise the video shows up as black, which is does now (please log in as admin). I don’t know what you mean by “I changed it to single quotes and the video showed up.” Doesn’t show up here.

I am very confused at this point. Ruel seemed to be saying something different from what you said. So questions:

  1. Should I be using Video Post Format or Standard Post Format?

  2. Should I use Page Editor (if this, then I must use Video Post Format because where else would I put the Video Embed Code)or Cornerstone (I’ll put embed code in the element)?

  3. Single quotes are not working for me, what to do?

I hope the issues are clear and you can help me solve these problems. Thank you.

Hey Cindy,

Thanks for the clarification. With that, I clearly see the problem and I now see the problem with the video. Just note that it only happened just now. It was working previously as you can see in my previous screenshot. Here are my answers to your questions.

The video is black because the source itself is broken or is not public. For more details, please check this article from Youtube: https://support.google.com/youtube/answer/3037019?visit_id=636975904918690811-621213232&p=player_error1&hl=en&rd=1. For proof, just visit this link to see what I mean: https://www.youtube.com/embed/a34k56h-E. Now compare that with a working video from Youtube: https://www.youtube.com/embed/h-UykFnco-g. You can also try embedding public videos from Youtube to test further.

This is not because of double or single quotes. That is only for the Embedded Video Code option under the Post Settings and not Cornerstone’s Video element.

In this case, please use the Video Post Format. This will do exactly what you want with no custom CSS code. The Video Post Format

  • will not display the featured image in the post
  • will not display the featured image in the blog list page
  • will display the featured image in the Classic Recent Posts element or shortcode

It’s because there’s a problem with the video source as mentioned above. But, when I tested previously, the video works as you can see in my screenshot.

I’m sorry for the confusion but believe me. I am working for your best interest so I stated the facts and provided you with options.

I posted the features of the Video Post Format above. It would be up for you to decide which one to follow.

If you’re just going to post a video, I’d go with Video Post Format. If you want to display a complex layout in your content, you’d want to use Cornerstone.

The issue with the video is not about the single or double quotes. It’s because of there’s a problem with the source. Please check the source.

This double quote problem is only for the Embedded Video Code option under the Post Settings not in Cornerstone.

Thanks.

I all the above, video post using page editor not Cornerstone, embedded code (tried both single and double quotes) and now I see an empty box for the featured image and a black box for video, which by the way, is published, not private and has been collecting views already. I did remove CSS code and “has-video” but nothing changes. I am at a total loss. I need HELP. is there an extension, a plug in?

If anyone else can help, I’d appreciate it greatly. thanks.

Hey Cindy,

As I’ve said, the problem with your video is not because of our theme. Please contact Youtube support for that.

I recorded a video for further proof. Please see the secure note.

I’ve already laid down all the facts here and I’m not sure how we could help further. Please review our responses and the screencast in the secure note. Please also review X and Cornerstone usage tutorials in our Knowledge Base.

Thank you for understanding.

This topic was automatically closed 10 days after the last reply. New replies are no longer allowed.