I am using video.js 5.7.1 on a single video player within a web page. The video element contains a "captions" track element. When the user clicks the CC button in IE 11, they see a menu containing the following:
captions settings
captions off
english
I would like to completely remove the first menu item "captions settings" so that the menu only shows "captions off" and "english".
I'm sure it's something simple, but I can't seem to find how to disable/remove the "captions settings" menu item. What needs to happen to remove this option from the CC button on the player?
For now, I'm setting the track kind to "subtitles" instead of "captions", to avoid the settings menus entirely.
What I ended up doing was adding the following CSS after the video.js CSS:
/* Prevent CC settings menu item from displaying */
.vjs-texttrack-settings {
display: none;
}
This accomplished what I needed; the captions settings menu item no longer appears on the CC menu. This works in 5.7.1 and 5.8.8.
In case anyone comes here looking to hide all of the caption settings this should work:
.vjs-caption-settings {
display: none;
}
I posted this same question to video js forum on github:
https://github.com/videojs/video.js/issues/3202#issuecomment-202540661
The Videojs folks posted solutions - here is the solution I used based on theirs:
after the player started up, I made that problematic area invisible with css:
$(".vjs-texttrack-settings").css("display","none");
Related
This is my first question on here. Any feedback is welcome.
I'm creating a dropdown menu for the mobile version of our site and I'm running into an issue that seems quite straight forward.
In this image you see the menu how it should look like when the submenu is extended. When working in the Elementor editor everything looks how it should look. When I go to preview mode or to the live website the following happens when I extend the dropdown menu: lines appear around the extended item what I think are borders or an outline. Also when I close the submenu the menu item gets highlighted: highlighted menu item.
It seems like the menu item is set to active and the default border/overlay is added. I don't see how that is possible since this are my settings: settings. Separation is set to none and the background-color and color are both set to their correct values. Settings for normal and hover are the same as active, since I don't want any changes to happen.
I tried other color values and changed them to transparent. These changes work properly but the black border and overlay remain an issue.
I also tried adding the following CSS to the element but this didn't help:
selector .menu-item {
border: none;
outline: none;
}
I tried rebuilding the menu, some other code snippets, disabling caching plugins, setting separation to solid with 0px and more but nothing fixed it so far. When looking at the elements using inspect I see that when extending the submenu the class changes from elementor-item has-submenu to elementor-item has-submenu highlighted. If I could somehow disable this I think the issue would be solved.
My HTML and CSS knowledge is quite limited so I hope there is an easy fix that I'm not familiar with.
Many thanks in advance!
Edit: Thanks to #Alivia Pramanik for the quick and easy solution!
Welcome to SO. If I am not mistaken, you can change this with Elementor's own design. To do with this custom CSS, add this,
.elementor-nav-menu--dropdown .elementor-item:focus {
background: #0000!important;
outline: 0!important;
}
See the image for your reference
So I have installed audio.js on my website. All works ok. I want it to change how it looks. Actually, I want that it would appear only as Play button (or play/pause button). Or in other words: I want to hide progress bar and "time passed | time remaining". How can I do this?
audiojs has settings that u can customize the style and markup, please refer to the documentation
If you wanna use default class names, you can overwrite their styles by adding css something like this:
.audiojs .scrubber {
display: none;
}
There is the working source code link: https://jsfiddle.net/qp5xjxb9/3/
I am using the Material Design Light "Text Heavy" template page as a basis for a page I am creating. I would like to use the tabs up the top to link to places within the page without hiding other content: ie scroll down to a card, without hiding card above and below.
How can this be accomplished?
Using tabs as navigation isn't supported in v1.0.x, sadly. It's been added in master, though, so it'll be coming in v1.1!
For now, your best bet is to override styling for panels. So just code up everything as normal, as if you wanted your panels to be hidden, and then override their styles:
/* Use an extra class to make sure you only target the
ones you want. I used 'my-panel' in this example. */
.my-panel.mdl-layout__tab-panel {
display: block !important;
}
That should override the mdl-layout__tab-panel's default behaviour, which is to hide.
If this doesn't work, just share a codepen and I should be able to help further!
I have this accordion built using only HTML and CSS but whenever one of the tabs on the accordion is clicked the page will jump so that the tab is at the top of the page.
Example:
<div id="tab-1">502-831
I'e looked around online and have tried a few solution such as JavaScript and onlick solutions but either the solution does nothing or causes the tab to stop functioning. I am using Joomla so there isn't much support for JavaScript. Here is the bare bones code for the accordion on jsfiddle, if you watch the scroll bar on the right when you click the accordion tab you will see it jump.
http://jsfiddle.net/1pjudu4j/4/
I added this line code of CSS to your example and it worked as intended.
.accordion div:blur .content {
display: none;
}
Do play around with your CSS with this in mind.
Please do note, you are not using JavaScript at all for this, therefore this has been posted in the wrong section. Please edit it and remove the "javascript" and "jquery" tags.
Since you are using Joomla, replace:
502-831
with:
502-831
I have a wordpress site and am using the plugin 'Yet Another Social Plugin' to add social buttons at the end of each post. The problem is on my mobile site which I have customized with WP-Mobile is showing these buttons. I am able to remove all of them except the G+ button. I am able to get it removed using visibility: none; when I do a live edit inside of Chrome developer console but when I apply that in the css it is ignored and I am not even seeing it when I view that tag/class. Is there some trick or something weird about the +1 button that I am missing?
You can view a picture of the issue here, https://dl.dropboxusercontent.com/u/11217802/Screenshot_2013-04-28-00-07-03.png
and a good 'test page' is here,
http://jrummy16.com/test/app-manager-overview/
Our test site is currently jrummy16.com/test. I am just spoofing my User agent to view it on my computer.
Edit
Sorry, I didn't see that you were talking about your mobile site.
In this case, add
.plusone{
display: none;
}
to your CSS - it will hide the entire iframe.
As your G+ "a" as no ID nor class, edit your css to add
.socialmedia-buttons a:nth-child(2) {
display: none;
}
Consider using display:none; rather than visibility:hidden;, as the visibility property holds the placeholder of your div while display suppress it of the flow.
Visibility:hidden; =>
This should do the trick (tried with Chrome inspector on this page).