Cornerstone full screen video and hover playback

Support
#1

Hello!

I am making a small promo page that’s supposed to be different than the rest of my site.
The idea is to have four different videos in full screen, with no padding whatsoever.
Here is the idea (with some random videos and posters):
www.moloton.com/martin-test2

I’ve managed to make the layout like I want but I need help with two things:

  1. The responsive resizing adapting to resizing of the browser isn’t quite working like I want. If I reduce the width on the browser, it zooms out and you can see some of the grey background underneath before it goes over to stacking the videos like it should on iOS. This doesn’t happen if I choose a background in a Cornerstone section, no matter if it is a image or a video. I want it to resize the same way as these backgrounds, so that you never see the background - like on these example pages made in Cornerstone:

http://www.moloton.com/martin-test/
https://www.cstemplates.com/fullscreen-section/

Is it possible? I’ve tried fiddling around with the CSS width and height to make it work, but I can’t do it. Is it the ‘background-size: contain’ function that does it here? Is it possible making this Section behave the same?

  1. Now the video playback starts when I click, but I want to try to implement playback on hover. I’ve tried with some basic Javascript, but when inspecting I can’t find which is the actual class of the video to use when referencing… It’s all so baked into so many containers in Cornerstone. I would like the video to play when hovering and stop when not and when clicking the video ref another link to a file download.

I’ll send you some login credentials, but I don’t know how to hide them in this new support platform?

All the best!

#2

If it helps, it would be enough just to get help with the javascript for hovering video. I named the ID and class on the first video (on www.moloton.com/martin-test2) to “video1” and then used this script in the custom java for that Cornerstone page:

var $video1 = $(’.video1’);

$video1.on(‘mouseenter’, function () {
$video1.get(0).play();
});

$video1.on(‘mouseout’, function () {
$video1.get(0).pause();
});

But it doesn’t seem to work :confused:

Would be so grateful for any help.

Best,
Linus

#3

I got the javascript working, still need help with the resizing of the section to never show the overflow!

#4

Hi there,

It’s because of this line added to each of your column,

display: table-cell;

This creates the gray background on the smaller device because the content or design within in is vertically centered-align like a table. We didn’t use that table styling in our columns for that reason. But if you prefer to use that styling that make sure it’s only applied in desktop, example, we can use CSS

@media ( min-width: 980px ) {
.table_cell {
    padding: 0px !important;
    vertical-align: middle !important;
    display: table-cell !important;
    float: none !important;
}
}

So instead of adding your style within your columns’ Style input, you just need to add table_cell to your column’s Class input.

Hope this helps :slight_smile:

#5

@Gorillo - I’m also trying to get my image to play video on hover. Can you tell me how you did it?

#6

Hello @WJWelsh,

At this time we kindly ask that you open them up in a separate thread. The longer threads get in the forum, they become more difficult to support as they tend to drift off topic and they also make it troublesome for users trying to search for solutions. Keeping threads relevant to their original inquiry ensures that we can keep better track of what has been resolved and that users can more effectively find answers to similar issues they might be experiencing.

Thank you very much.