Introduction
All CSS included by the Arpeggio player is namespaced to target DOM elements within the .viddler-app-wrap class to prevent our CSS affecting anything other than the Viddler.
In order for your CSS to take precedence over the internal player CSS you can make your styles more specific by adding another level of targeting. For example:
body .viddler-app-wrap .thing {
color: red;
}
Topics
Control Bar
To target the control bar, you need to target div.vid-interface. Here you can change things like the color, width, border radius etc.
body .viddler-app-wrap div.vid-interface {
background-color: green;
}
The control bar is usually floated on top of the video, but once the width drops to 480px or below (such as on a mobile device), the control bar will be positioned underneath the video. The .viddler-app-wrap will have a class of sub-480 when the embed is in this state, so you can control the bar with:
body .viddler-app-wrap.sub-480 div.vid-interface {
background-color: orange;
}
Play/Progress bar
To customize the play bar you should target .vid-progress. To customize the section of the playbar that has being seen, you should target div.vid-mega-play-bar. To modify the image used for the icon used to show the current position in the playbar. Add a background-image attribute to .time-icon. To modify the marker icon showing the position of a comment, you should target .mega-markers-container .comment-marker.
Examples:
body .viddler-app-wrap div.vid-progress {
background-color: orange;
}
body .viddler-app-wrap div.vid-mega-play-bar {
background-color: red;
}
body .viddler-app-wrap .time-icon {
background-image: url("http://example.com/path/to/your/icon");
}
body .viddler-app-wrap .mega-markers-container .comment-marker {
background-image: url("http://example.com/path/to/your/icon");
}
Times
To target the video duration use div.viddler-duration. To target the current play time use div.viddler-current-time.
Play Overlay button
The play overlay button is all implemented in CSS. .play-overlay-button is used for the outer circle and .play-overlay-button span for the triangle shape inside it. You can change the colors in your player settings. You could use a background image instead using custom CSS such as:
body .viddler-app-wrap .play-overlay-button {
border-radius: 0;
background-image: url('http://example.com/path/to/your/image');
}
body .viddler-app-wrap .play-overlay-button span {
display: none;
}
Icons
Icons used in the player are all in a sprite image. The colors can be customized in your player settings, but if you need more control, the easiest way to modify them would be to download the current sprite from http://static.cdn-ec.viddler.com/js/arpeggio/v2/img/controls-sprite.svg. Then add some CSS definitions to change the background-image attribute of the sprite class:
body .viddler-app-wrap .sprite {
background-image: url("http://examples.com/path/to/your/sprite");
}
body .viddler-app-wrap .sprite:hover:not(.no-hover), body .viddler-app-wrap .sprite.alternative {
background-image: url("http://example.com/path/to/hover/states/sprite");
}
Modals
Modals are used in various places in the player such as the comment popup, quality selector etc. .modal-outer is the general container class for these modals. If you change the background color, you will also want to update the downwards triangle as well by doing the following:
body .viddler-app-wrap .modal-outer .triangle {
border-top: 20px solid green;
}
If a .modal-outer contains a list of options to choose from (e.g., quality selector), it will also have a class of.picker. You can then target li and li.current to modify how these lists work.
Comment Embed
The .viddler-app-wrap will also have a class of '.comment-embed' for comment embeds
- .row - each comment
- .author - the text for displaying the author of a comment
- .date - the date a comment was made
- .timestamp - The timepoint within the video where the comment was added
- .text - The main body of the comment
- .actions .load-replies-button - The triangular button to load in the replies of a comment
- .reply-button - The button that opens the reply modal
- .new-comment-button - The button that opens up the new comment modal
The core DOM structure of the comment embed is targeted at '.viddler-app-wrap div.viddler-embed .comments-list'. The .comments-list is the main container for everything, so you would set the background color here. This will also have a class of "theme-{theme name}", where {theme name} is the name of the theme being used (default is dark, there is also CSS rules to cover light). So you would be best to also include your theme classname in your custom CSS to make sure your rules do not get overridden.
All rules below are assumed to be prefixed with .viddler-app-wrap div.viddler-embed .comments-list
Header
.comments-column-header.count
.comments-column-header.date - the date column header. Can also have a class of sorted-desc or sorted-asc if this is the active sort option
.comments-column-header.timestamp - the timestamp column header. Can also have a class of sorted-desc or sorted-asc if this is the active sort option
.new-comment-button - The button that will show the form allowing you to add a comment
Individual comments
.row.comment - A row that includes a single comment. Will also have a class of "reply" if this is a reply row
.row.comment .author - The name of the user who wrote the comment
.row.comment .timestamp - The timepoint within the video at which the comment applies to
.row.comment .date - The date at which the comment was authored
.row.comment .text - The content of the comment
Actions Buttons
.row.comment .actions - a container div for the 3 buttons below
.row.comment .reply-button - a button to show the reply form
.row.comment .delete-button - button to delete the comment (only for account owner)
.row.comment .load-replies-button - a button to load the replies for this comment
Pagination
.comment-page - a div that holds the spans for each page
.pager-el - an individual span tag that represents a page. Will have an additional class of .pager-current-page if the item represents the current page
Comment Form
.form-row - the row in the table that will contain the form
.comment-text - this is a div that acts similar to a text area to collect the comment text. A div is used so it can automatically resize based on the content
.comment-form-submit - The submit button to save the comment
Comments
0 comments
Please sign in to leave a comment.