HackerOne users: Testing against this community violates our program's Terms of Service and will result in your bounty being denied.

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;
}

Comments

Sign In or Register to comment.