I'm using video.js with a custom skin for some videos on an html page.
Everything is working fine except for Safari Mobile iOS 7, cause it doesn't hide the default play button for videos.
I'm using all this css rules
.video-js video::-webkit-media-controls {
display:none !important;
}
.video-js video::-webkit-media-controls-panel {
display: none!important;
-webkit-appearance: none;
}
.video-js video::--webkit-media-controls-play-button {
display: none!important;
-webkit-appearance: none;
}
.video-js video::-webkit-media-controls-start-playback-button {
display: none!important;
-webkit-appearance: none;
}
and actually i can see these rules on inspector but they are simply not working.
Is there a way to hide the button or is that a safari bug?
Note: this answer works for controls panel play button and not for big play button over video element
There are different CSS styles for shadow elements on different iOS versions.
For iOS 7 instead of
.video-js video::--webkit-media-controls-play-button
should be
.video-js video::-webkit-media-controls-play-button
Here is a list of all shadow subelements in HTML video element on iOS 7 (I've checked it on my devices):
<div>:
video::-webkit-media-controls
video::-webkit-media-controls-panel
video::-webkit-media-controls-timeline-container
video::-webkit-media-controls-current-time-display
video::-webkit-media-controls-time-remaining-display
video::-webkit-media-controls-panel
<input type="button">:
video::-webkit-media-controls-rewind-button
video::-webkit-media-controls-play-button
video::-webkit-media-controls-return-to-realtime-button
video::-webkit-media-controls-seek-back-button
video::-webkit-media-controls-seek-forward-button
video::-webkit-media-controls-mute-button
video::-webkit-media-controls-volume-slider-mute-button
video::-webkit-media-controls-fullscreen-button
video::-webkit-media-controls-fullscreen-volume-min-button
video::-webkit-media-controls-fullscreen-volume-max-button
<input type="range">:
video::-webkit-media-controls-timeline
video::-webkit-media-controls-volume-slider
video::-webkit-media-controls-fullscreen-volume-slider
Related
How to hide scrollbar in v-textarea?
While this works on simple textbox, but in v-textarea doing this does not work:
<v-textarea class="hide-scrollbar"/>
<style>
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
</style>
.hide-scrollbar textarea {overflow-y:hidden}
Hide Scrollbars But Keep Functionality
// Hide scrollbar for Chrome, Safari and Opera */
.hide-scrollbar::-webkit-scrollbar {
display: none;
}
// Hide scrollbar for IE, Edge and Firefox */
.hide-scrollbar {
-ms-overflow-style: none; /* IE and Edge */
scrollbar-width: none; /* Firefox */
}
Hide Scrollbars and Functionality
.hide-scrollbar{
overflow: hidden;
}
I can't scroll page on mobile while start draggin on carousel. So if carousel take all visible space on mobile - it's become little bit tricky to go up/down to page...
How I can disable this kinda "interception" of scrolling?
Add this CSS to your CSS/SASS file and this should work, it worked for me.
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item {
-ms-touch-action: auto;
touch-action: auto;
}
touch-action: auto; don't work for me i use touch-action:pan-y; and it's work
add this css:
.owl-carousel .owl-stage, .owl-carousel.owl-drag .owl-item {
-ms-touch-action: pan-y !important;
touch-action: pan-y !important;
}
I am having an issue with my boostrap everytime in mobile i try to open the collapsed menu its shows a little "jump". Already tried to style the class .in but still nothing. Any hint what might be happening?
You can see the issue in http://real-embrace-portugal.pt/
Thanks for the help.
This problem is caused by the carousel of images.
You need to stop the carousel when scrolling
$(window).scroll(function() {
//User is scrolling
//Stop the carousel
$('#myCarousel').carousel('pause');
});
you can use
$('#myCarousel').carousel('cycle');
for start the carouse cycle again
please use this css.. i think ur problem is solve..
#media only screen and (max-width: 767px) {
.navbar-default .navbar-brand {
color: #777;
height: auto !important;
}
.collapse.in {
display: block;
margin-top: 0 !important;
}
}
I custom styled the buttons of a Colorbox lightbox on this page (click the image to load).
There are gray buttons (two arrows and an X) that do not appear in Safari (7.0.1) but appear in Chrome and Firefox.
Using web inspector to change the background to a color has no effect either.
CSS of one button:
#cboxNext {
position: fixed;
top: 47%;
right: 18px;
width: 22px;
height: 32px;
background: url("buttons.png");
background-position: -42px 0;
background-repeat: no-repeat;
background-color:white;
}
The .png sprite file and stylesheet are in the same directory.
Updating to the latest Colorbox version didn't help (I reverted back to older version).
I read here that Safari in the past had issue with the background shortcut
syntax, hence the long form.
Any help is much appreciated!
Fixed.
The position:fixed buttons were child elements of a container that had overflow:hidden. Unlike other browsers, Safari seemed to hide the buttons inside their parent.
animation style working fine with mozilla and changes color after 5sec but when I tried to run same code on chrome then its not taking that effect??
Style:
.changeColor{
animation: change 5s step-end both;
}
#keyframes change {
from { color: red }
to { color: #4D4D4D }
}
HTML:
<label class="changeColor">XYZ</label>
Internet Explorer 10, Firefox, and Opera supports the #keyframes rule and animation property.
Chrome and Safari requires the prefix -webkit-.
#keyframes myfirst
{
from {background: red;}
to {background: yellow;}
}
#-webkit-keyframes myfirst /* Safari and Chrome */
{
from {background: red;}
to {background: yellow;}
}
When the animation is created in the #keyframe, bind it to a selector, otherwise the animation will have no effect.
Bind the animation to a selector by specifying at least these two CSS3 animation properties:
Specify the name of the animation
Specify the duration of the animation
Note: Internet Explorer 9, and earlier versions, does not support the #keyframe rule or animation property.
div
{
animation: myfirst 5s;
-webkit-animation: myfirst 5s; /* Safari and Chrome */
}