Custom CSS for video player & no border

  • stevesideas

    (@stevesideas)


    9 years, 2 months ago

    Hi there,

    First post, so hi there. I’m hoping someone can help me.

    I am trying to add the following custom css:

    .player .video-wrapper .video {
  top: -30px;
  left: 30px;
      }

.player.no-playbar:not(:-webkit-full-screen) .controls {
    display: none;
      }

      .player.no-playbar.no-fullscreen-api-support .controls {
                display : none;
              }

.rev_slider_wrapper a border:none or frameborder=”0”

    I cannot get any of this to work. I’m assuming the code is called too early and gets overwritten by the CSS already being used.

    The custom CSS is meant to hide the video player controls in the revolution slider and also remove the border that seems to sit around the video within the slider.

    I used inspect element within google chrome to see the code I needed to get things to behave how I want but this custom code doesn’t execute.

    The player no border commands have never worked even though I found the code on a site that explained this code should remove the vimeo border.

    I did paste this code in the theme custom css, revolution slider custom css and lastly the theme junkie custom css seperatly to no avail.

    Can anyone help me out ?

    Site is at: http://www.visomi.com – if you wait for the animation to appear (3rd slide on main page) you will see what I mean.

    Thanks

    Steve

Viewing 2 replies - 1 through 2 (of 2 total)
  • Moderator bcworkz

    (@bcworkz)

    9 years, 2 months ago

    The rules for which property is applied to any given element are complex, but can be reduced to a few concepts that generally apply. See http://www.w3.org/TR/CSS2/cascade.html for the full explanation.

    Generally speaking, child theme rules will apply over parent theme because they are loaded later, but plugin rules are different because their CSS should have been enqueued in a hook to ‘wp_enqueue_scripts’. All hooks added with the same priority are essentially undefined in regard to what order they are executed, but there are indications this actually happens alphabetically. If you enqueue your CSS with a bigger priority number, it should be added later and thus take precedence if all other cascade priorities are equal.

    Sometimes merely adding “!important” to the rule is enough for it to gain priority. If possible, providing a selector with more specificity will nearly always take precedence. If all else fails, placing your CSS inside a <style> block right on the page will give your rules greater precedence. This violates the rule that all WP CSS should be enqueued, but it usually works for small bits of CSS.

    I wish I could just give you a workable solution, but it sounds like you’ve already done all of what I could offer, using the browser inspector to determine what to do. The next best thing is to understand the cascade precedence rules.

    You mentioned the no border command for the slider didn’t work. I’m not sure why it wouldn’t, but isn’t there a similar command for no controls? It’d still be worth a try if it’s available. Good luck!

    Thread Starter stevesideas

    (@stevesideas)

    9 years, 2 months ago

    Thanks for the reply. Some of the stuff you are talking about is beyond me as I’m a real beginner when it comes to any type of CSS. I pretty much just stumble through the code using inspector and try to see what does what.

    I’m not sure about the command for no controls. I turned all the controls off for that video. These were defined by Vimeo. The pause/play button that appears I think is something completely different.

    I’ll play around a bit more and see what I can 🙂

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Custom CSS for video player & no border’ is closed to new replies.