Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Try Vanilla Forums Cloud product

In this Discussion

Embedded Videos Resizing Using only CSS

vrijvlindervrijvlinder Papillon-Sauvage MVP
edited August 2013 in Tutorials

Embedded Videos and other embedded content Resizing Using only CSS

You can virtually do anything with CSS. If you have people embedding video content or movies that create players and have a set size or the user added his own size, not to worry you can make the content any size you wish and even decorate it with an image border as the example below shows how.

This will make all of the embedded videos become the same size no matter how they were embedded . And add an image border around the video. Note that one browser does not support the image border afaik . You can guess which it is ;)

.Preview .Message, .MessageList .Message .Video object embed {
clear: both;
line-height: 140%;
font-size: 100%;
word-wrap: break-word;
border: 15px solid transparent;
width: 480px;
padding: 5px 10px;
-moz-border-image: url(http://www.wpclipart.com/page_frames/more_frames/more_frames_3/generic_border.png) 20 20 20 20;
-webkit-border-image: url(http://www.wpclipart.com/page_frames/more_frames/more_frames_3/generic_border.png) 20 20 20 20;
-o-border-image: url(http://www.wpclipart.com/page_frames/more_frames/more_frames_3/generic_border.png) 20 20 20 20;
border-image: url(http://www.wpclipart.com/page_frames/more_frames/more_frames_3/generic_border.png) 20 20 20 20;
}
hgtonightSystem_Errorgurlusofine
Sign In or Register to comment.