Video image

Support
#1

insert image over embedded video how to do with x ?

#2

Hi There,

That is not possible. It could be possible with custom development but out of the scope of our support.

You can on the other hand, add the video background to your section and add an image on your section

Hope it helps!

#3

do background videos play on mobile?

#4

Hello There,

Thanks for updating in! No it will not play. Videos are bandwidth extensive. This is why in most sites, videos are automatically disabled. As a replacement, you will have to insert a poster image so that the image will display in mobile screens.

Hope this helps.

#5

It is possible to get videos to play on mobile. They need 3 things, to be small, have no sound and use the ‘playsinline’ code. However getting the video to play as a background with layers on top is where I’m stuck at!

https://bluestack.media/homenew

I’ve got a video on there playing on mobile (although it’s not formatted for good size and resolution).

I would love to get some titles over it and set it to loop 3 times…

#6

Hey @bluestack,

Your section is hidden on mobile that is why your content does not display.

There is no option for video loop limit and formatting. For that, you would need to hire a third party developer to code a custom function for you.

Thanks.

#7

Sorry…I was in the middle of editing that page when my laptop died last night…if you check it again now you should see a video playing automatically on mobile.

#8

Hi again,

To add a title over the video, you can replace your code with the following code:

<div class="video-wrapper">
<h1>The Title</h1>
<video playsinline="" autoplay="" loop="" muted="" style="min-width:100%; min-height:100%;"> <source type="video/mp4" src="&lt;video playsinline autoplay loop muted style=" min-width:100%;="" min-height:100%;"=""> <source type="video/mp4" src="https://bluestack.media/wp-content/uploads/2018/03/Header-1.mp4"> </video>
</div>

Then you can add the following CSS code in the Theme Options > CSS

.video-wrapper {
    position: relative;
}
.video-wrapper h1 {
    position: absolute;
    text-align: center;
    padding: 20px;
    color: #fff;
}

Hope this helps!

#9

Thanks!

I’ve tried that code, it works in the Cornerstone preview but not live.

#10

Hi again,

That must be cache, please purge your plugin’s cache as well as browser’s cache and this should fix the issue.

Let us know how this goes!

#11

I purged the cache on the site and browser, still no change on mobile

#12

Hi there,

I still see the cache, would you mind disabling your cache plugin first and test it again? And please provide your login credentials in a secure note and we’ll confirm the place where it’s implemented.

Thanks!

#13

Hi,

so I decided to try and tackle this problem again and I’ve had some degree of success.

I have been able to implement a video background with some text and two buttons on top.

New problem, neither of the buttons work. The first is a light box the second is a scroll to main content.

Any ideas?

#14

Upon checking, the lightbox works.

For your scroll button, link it to the next section.

Thanks.