Borders around Youtube and Vimeo videos

Please post all questions and comments regarding Help & Manual 7 here.

Moderators: Alexander Halser, Tim Green

Post Reply
User avatar
Ed Hawco
Posts: 165
Joined: Thu Nov 07, 2013 5:50 pm
Location: Montreal
Contact:

Borders around Youtube and Vimeo videos

Unread post by Ed Hawco »

Hello. Is there a relatively easy way to add a border to inline Youtube and Vimeo videos? There doesn't seem to be such an option in the "Edit Youtube/Vimeo Video" dialog boxes.

The use case is this: some instructional videos show things happening on a white screen, and when that video is embedded on a white page, you lose the sense of the boundaries of the video. (The same thing happens with still screenshots, which is why experienced content creators always add a border to screenshots.)

I know there are at least two ways to do this with iFrame codes, but with H&M you only enter the URL, with no styling attributes.

If this isn't possible, then I would like to add this to the feature requests. :-)

I would ask that it be accomplished by adding three items on the "Edit Youtube/Vimeo Video" dialog boxes:
(1) Checkbox for "border"
(2) Field for entering width in pixels
(3) Field for entering color (hex code, with default = #000000)

In the background, it's just a matter of adding this style attribute to the iFrame:
style="border: 1px solid #000000;" (with the width and color being the data coming from the dialog boxes).

Altrnatively, a quick and dirty way is to use the iFrame attribute frameborder="1" but that creates a fairly ugly border and there is no coloring option, so I would encourage the use of the "style" attribute as described above.

Thanks!
e
d
============================================
Ed Hawco
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: Borders around Youtube and Vimeo videos

Unread post by Simon Dismore »

It's relatively easy to do this with css...

Code: Select all

     .video-lightbox { border: 1px solid #000000; }
...which give you much greater flexibility than anything a dialog box implementation could do. If I were to ask for a new feature on the wishlist, it would be to implement "HTML Class" (as in the 'Open Image' dialog) in the multimedia dialogs, with the default being 'video-lightbox'.
User avatar
Ed Hawco
Posts: 165
Joined: Thu Nov 07, 2013 5:50 pm
Location: Montreal
Contact:

Re: Borders around Youtube and Vimeo videos

Unread post by Ed Hawco »

Thanks Simon. I assume the ".video-lightbox" element only applies to videos in lightbox format. Would you happen to know what element is used to style in-line videos?
e
d
============================================
Ed Hawco
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: Borders around Youtube and Vimeo videos

Unread post by Simon Dismore »

Ed Hawco wrote:Thanks Simon. I assume the ".video-lightbox" element only applies to videos in lightbox format. Would you happen to know what element is used to style in-line videos?
I'd assumed/misremembered it was the same style for both inline and lightbox, but apparently the inline div doesn't have any class or id.

So I think this one is for Tim. Sorry to have wasted your time!
User avatar
Tim Green
Site Admin
Posts: 23156
Joined: Mon Jun 24, 2002 9:11 am
Location: Bruehl, Germany
Contact:

Re: Borders around Youtube and Vimeo videos

Unread post by Tim Green »

Hi Ed, Simon,

Inline videos are in three nested div elements, but none of them have class names assigned to them. They all have inline styling code, so there's not a lot you can do here. Sorry about that...

By the way, if you ever want to check something like this, just open the WebHelp in Chrome, right-click in the topic area and select View Frame Source (for standard skins) or View Page Source (for V3 Responsive skins).
Regards,
Tim (EC Software Documentation & User Support)

Private support:
Please do not email or PM me with private support requests -- post to the forum directly.
Simon Dismore
Posts: 454
Joined: Thu Nov 16, 2006 1:29 pm
Location: London, UK

Re: Borders around Youtube and Vimeo videos

Unread post by Simon Dismore »

Tim Green wrote:Inline videos are in three nested div elements, but none of them have class names assigned to them. They all have inline styling code, so there's not a lot you can do here
I've added a wish-list item Support HTML Class on all insertable content. If you support this idea please comment in the wish-list forum—with your use case if possible.
Post Reply