[Resolved] Uploaded a video in a block charging a picture first and then a video

[Geoffrey A.]

Hi there,

I was applying this document https://docs.generatepress.com/article/background-video/https://docs.generatepress.com/article/background-video/
to add a video in a container in a block, but it did not work. I add the CSS in: appearance – customize – additional CSS. Was it correct?

[Ying]

Hi there,

Yes, it’s correct.

Can you link us to your site where we can see this block with the video?

[Geoffrey A.]

Hi Ying, here is the link

I added the CSS to the same page, and it worked, but could you teach me how to resize it for mobile?
https://underwaterbioacoustics.com/hydrophone-copy/

[Ying]

1. It seems you’ve added the CSS code to the block’s additional CSS class(es) field, it’s not the right place, can you remove that?
https://wordpress.com/support/wordpress-editor/adding-additional-css-classes-to-blocks/

2. I’m not seeing the CSS code inside the customizer > additional CSS, can you make sure the cache is cleared?

This is the only CSS I see in the additional CSS field:
https://www.screencast.com/t/hiDRBoaXZ

[Geoffrey A.]

Hi Ying, I did it, but instead of being inside the blog, it is on the top of the page and covers 100% of the page width.

Could you tell me how I can make it occupy only the space allotted in the blog?

Thank you.

[Fernando]

Hi Geoffrey,

For reference, can you re-share the link to where we can see you’ve implemented this?

The link previously shared seems to not exist anymore.

You may use the Private Information field for this: https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

[Geoffrey A.]

Hi Fernando, I unpublished it, but it is published again.

[Fernando]

Thank you! To clarify, do you want it to occupy just the left side of the Grid Block it’s in?

[Geoffrey A.]

Yes, the left side. Thank you.
It is set in another container.

[Fernando]

Thank you for clarifying.

Can you try removing this part of the CSS code?:

.background-video {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0.5;
}

Let us know how it goes.

[Geoffrey A.]

Thank you, Fernando. It works perfectly. I am starting to understand what happened.

I have another question because I manage two accounts. This is for a company, but I purchased Generatepress for a personal project.

I installed that code yesterday to be used in the head of all my pages, but I want to also add it to my personal page this code to use it in some blocks. How can I do it? Can I change the code’s name?

.background-video for the heads of the pages
and let’s say,
.background-video-block for the blocks inside the page?

[Fernando]

If you’ll be having different CSS for the other videos, you’re correct. You’ll need to use a different CSS class.

But if it’s just the same, using the same class would be alright.

You can probably test first with the same class, and change it if necessary.

[Geoffrey A.]

Thank you so much, Fernando.

Have a great day.

[Fernando]

You’re welcome, Geoffrey! Have a great one too!

[Geoffrey A.]

Thank you so much, Fernando. I am understanding how this works.

Have a great day.

[Author]

Posts