I’ve been trying to experiment with adding a local video, but it’s not working terribly well. There are no options in the control panel to define how large a video should appear on the page, so I tried to create a custom class, but it destroys the page formatting when previewed.
For example, I took a video that is 1920x1080 and set the dimensions to a third of that size, so it’s 640x360 on screen. The video does change size correctly, but is suddenly shunted to the left side of the screen and I’ve tried altering the position options for the custom class, but it’s not going back centred like before.
No doubt I’m doing something wrong here, but it’s not immediately obvious, so I wanted to ask if anybody knows how this should be done?
Thanks that has partially worked and I didn’t know there was an auto option, until I started typing it manually, because it wasn’t visibly listed as an option.
The video is now at the correct size and centred after clicking on done, however the player bar then appears well below the video. When I click on the custom class to edit it all four sides are once again selected under margin and padding, whereas I had only selected the sides like in your example. It’s not saving the padding and margin choices correctly.
OK it looks like that custom class has to be added to the entire Bloc, rather than the video and at that point the player bar appears in the correct place, however there is a still a visual glitch, because there are large rectangular patches now on either side of the video with a different toned background.
OK, I’ve found a solution that works. Apply the custom class to the video itself with all four sides selected. Ignore the margin and set the padding as 0.
This then appears correct, whether previewed in Blocs or in Safari, but it looks like I’ll have to create a separate version for mobile at a smaller size.
The auto is one of those undocumented features.
I’m just testing it with the default Vimeo video, and I place the custom class on the video player, not the Bloc. It works fine and centers the player. The controls seem to be as expected.
When you reopen the custom class editor if all sides are selected, you won’t see your changes to a single side.
Just select the side you want and the value you had should show up:
I can do that, but then the player bar appears well below the video. When I’m back in the main window I can double click on the custom class to edit, but when the popup window appears all four sides are selected again. Perhaps it’s different because I’m using a local video intended for self hosting. It feels like a bug.
I wonder if @Norm could offer some guidance because it seems like a lot of guesswork is involved here. Even after selecting row I’m finding that all four sides of margins and padding are always selected as a custom class when I try to edit. It feels more complicated than it should be.
Is your only problem is that the custom class always selects all four sizes when you open it?
There’s only one place to display the value for margin and one place to display the value for padding; each has options for top, right, bottom, left and all.
Which one should be picked when you open the class? When you choose the left margin, or top padding doesn’t give you the value you set?
It doesn’t matter which side(s) I select, because it always defaults to all four sides if I go back and I was hoping for some input from Norm, so we could all learn a bit more.
I was busy during the day, but I’ve just had a play with this and found a better way, as shown in the attachment. Rather than set a fixed width and height, it’s better to set minimum and maximum widths, then leave the height to sort itself out. I tried setting the margin to zero as a test, but it reverted to auto and once again all four sides were selected.
With this arrangement the single video expands up to 640 where space permits, but then reduces down to 275 when required. It all sits in the centre of the screen and basically looks correct, but I can’t help thinking a lot of newer users will find this confusing and wish there were just a few settings in the sidebar.
I agree that the UI could be improved in custom classes. It’s confusing to have to select a side or all before you can see values. I would love to have all values both padding and Margin to be set and displayed independently. Perhaps @Norm could add this to a future release.
I can set it as shown in your example, but the next time I double click the custom class to edit it will show all four sides selected come what may. Apart from that the width is fixed at 640, which is no good for mobile because it’s too wide.
The way I have it now may not be the obvious solution but so far it’s the only way that seems to work as desired with no visual glitches, either in preview or in the browser. In an ideal world the settings would be obvious to a brand new user within 10 seconds and just work. That’s partly why I feel they should be in the side panel and I never would have known about the auto setting unless you had mentioned it.
Another point while discussing video is that there doesn’t appear to be any easy way to add a poster image. I tried adding it as a custom class, but it appears behind the video. I’m guessing that it takes the first frame of the video, but in this instance it’s black.
