Borderless Video Player?

[nathanguyette]

Hello all,

I was wondering, is there a way to make the current video player border-less?
Currently, the default video player looks like:

What I want it to look like:

I see in the docs there is a “border” property for the “YouTubeVideo” object, but it doesn’t give any sort of use case of how to use it, or what exactly it denotes…

[rickhurlbatt]

Is this being displayed in an alert currently?

[nathanguyette]

Yes. It’s being done like this.

alert(YouTubeVideo(youtube_id='5wb5HWVh6Fs', autoplay=True), large=True)

[shaun]

When I create a YouTubeVideo in an alert, I don’t get a border. Can you possibly share a clone link so we can take a closer look?

[david.wylie]

When you say border, are you talking about the padding between the player and the alert container (and possibly the OK button) ?

Maybe it’s my eyes (I’m 89 you know), but I can’t see a border around the player itself in your two pics.

[nathanguyette]

Sorry, I guess I must be using the wrong word. In my mind there are two rectangles. The rectangle that contains the video, and then the encompassing rectangle that also contains the “OK”. I just want to show the inner rectangle showing that contains the video. Does that make sense? I’ll try and illustrate:

Here is the current state:

This is what I want, except imagine the encompassing rectangle highlighted in red is completely gone:

[david.wylie]

Hmm…you can make it look at least equal all the way around by removing the buttons (buttons=[]) but I can’t work out the CSS required to remove the padding, sorry.

If I get a moment of inspiration I’ll post.

[stucork]

Something like

    alert(YouTubeVideo(youtube_id='5wb5HWVh6Fs', 
                       autoplay=True, 
                       spacing_above=None,
                       spacing_below=None
                      ), 
          large=True, buttons=[])

and in theme.css

either find the .modal-body and replace the padding to be zero

.modal-body {
  padding: 0;
  font-size: 16px;
  color: #747474;
}

or just add to the bottom of theme.css:

.modal-body {
  padding: 0;
}

[stucork]

also - if this is still the rickroll maybe dismissable=False for the alert?

or with dismissable=True and inside a while True loop…

[david.wylie]

That’s the line that did it for me :

.modal-body {
  padding: 0 !important;
}

https://anvil.works/build#clone:5JSOZ4HDFMNMDDSG=W6GUQXNT7L44ZQ26USYUJ6NR

[nathanguyette]

Thanks everybody Really appreciate it!