I'm having an issue with HTML 5 Video controls which can be viewed at:
http://www.filmsbyben.com/projects/beannchor/
In Chrome and Safari it displays correctly with no player controls and a large play button allowing the video to play. Whenever it is viewed in Firefox however the video controls display.
I have the following code added to the CSS which was required for controls to not display but has not worked for Firefox:
video::-webkit-media-controls-panel {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-play-button {
display: none;
-webkit-appearance: none;
}
video::-webkit-media-controls-start-playback-button {
display: none;
-webkit-appearance: none
}
video::-webkit-media-controls {
display: none;
-webkit-appearance: none;
}
I have also have added controls="false" to the video tag with no luck in relation to Firefox.
Any help would be greatly appreciated.
Remove controls attributes for video tag like this:
<video onended="videoEnded(this)" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" class="full-video video-button-fade" id="video-button-fade">
<source onended="videoEnded(this)" type="video/mp4" poster="http://www.filmsbyben.com/wp-content/uploads/2016/05/Beannchor-1.jpg" src="https://player.vimeo.com/external/133027081.hd.mp4?s=6e831cbf174dc8d972293b3275a3b34711904df8&profile_id=113"></source>
Your browser does not support the video tag.
</video>
Related
I want to use an iframe on a website and use this code:
<iframe src="https://dispatchcenter.com/widgets/tall/" width="100%" height="auto" marginheight="0" frameborder="0" border="0" scrolling="no"></iframe>
But the scrolling bar still shows. If I made anything wrong?
Can anyone help me to remove the scroll bar?
First give class to i frame and try this in css,
For Chrome, Safari and Opera:
.example::-webkit-scrollbar {
display: none;
}
For IE and Edge:
.example {
-ms-overflow-style: none;
}
For Firefox:
.example {
scrollbar-width: none;
}
It seems you cannot.
Tested in Chrome and FX.
Chrome hides the body one, but not the iFrame one
body {
background-color: teal;
}
iframe {
height: 2000px;
}
.hidescrollbar {
-ms-overflow-style: none;
/* Internet Explorer 10+ */
scrollbar-width: none;
/* Firefox */
}
.hidescrollbar::-webkit-scrollbar {
display: none;
/* Safari, Chrome Edge */
}
<body class="hidescrollbar"><!-- does not help in firefox in the fiddle -->
<iframe class="hidescrollbar" src="javascript:'<body class=hidescrollbar><div style=height:2500px>Hello</div></body>'"></iframe>
</body>
If the page is from the same server or a server with CORS enabled, use a div instead and insert using AJAX or via the server
I have a basic example of using the track element to load captions. In Firefox, the captions render sometimes, but not other times. Things that I have checked:
CSS positioning of video element (still see the issue with no positioning change)
Opening a private window (sometimes makes them show)
Disabling cache
CORS headers of mp4/vtt server (they are set to Access-Control-Allow-Origin: *) and the video tag has crossorigin="anonymous"
Changing autoplay and muted attributes
Reproduced intermittently in Firefox versions 97.0 and 98.0b4. I haven't noticed this issue in other browsers.
Edit: I added some CSS to this snippet that makes the issue repro for me now. So it's pointing to CSS, but weirdly, once I reproduce it, the captions continue to remain hidden even when I remove all styles.
.modal {
display: flex;
flex-direction: column;
}
.video-wrap {
flex-grow: 1;
height: 480px;
position: relative;
}
video {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: black;
}
::cue {
color: pink;
}
<div class="modal">
<h1>Video w/ VTT</h1>
<div class="video-wrap">
<video controls muted crossorigin="anonymous">
<source
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.mp4?cachebreak=001"
type="video/mp4"
/>
<track
label="English"
kind="captions"
srclang="en"
src="https://cuttle-learning.netlify.app/onboarding-sketch/videos/onboarding2.vtt?cachebreak=001"
default=""
/>
</video>
</div>
</div>
Demo also here: https://h05uh.csb.app/
Sounds like it's this bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1733232
That's currently the most minimal example I have which consistently
fails. Some (basic) examples fail after a couple of reloads. I assume
that's because of caching and layout complexity.
I have been building an app recently and have a loading animation playing at the start (just a mp4 video - for aesthetic purposes). It works great everywhere apart from on Iphone.
The issue is that there is a grey line around some of the video - not the same on every side. If i try to screenshot the page the lines are no longer visible.
I am using an iphone 7 plus and ios safari. To see for yourself see - https:pathfinder-new.herokuapp.com
The goal is for it to be seamless with the white background - example can be seen on desktop at above address.
Cheers,
Tim
I’ve been struggling for a few hours and found this as the only way to remove it (tested on Safari, Chrome and Firefox on iOS):
video {
-webkit-mask-image: -webkit-radial-gradient(white, black);
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
}
Took inspiration from this gist
I tried that on iOS 12 installed iPad WiFi 2017 on Safari and things were all good. Do you have any chance to video that glitch with another recording device?
Edit: General appearance cleaner -webkit-appearance: none may do the trick.
I had to go with the approach of a wrapper div and a position absolute one, something like:
HTML
<div class="wrapper">
<video loop muted autoplay playsinline>
<source src="./video.mp4" type="video/mp4">
<source src="./video.webm" type="video/webm">
<source src="./video.ogv" type="video/ogg">
</video>
<div class="video-ios-border-fix"></div>
</div>
CSS
.wrapper {
display: block;
position: relative;
font-size: 0;
}
.video-ios-border-fix {
position: absolute;
z-index: 1;
box-sizing: initial;
left: -2px;
top: -2px;
right: -2px;
bottom: -2px;
border: 4px solid #fff;
}
video {
width: 100%;
}
I want to overlay a video with some text. The html/css works fine in Safari and Firefox - but in Chrome the text disappears on scrolling. Here is a quick video showing the problem: https://imgur.com/2iShiaL
The HTML/CSS is quite straight forward:
<figure>
<video preload autoplay loop muted playsinline src="https://zachholman.com/video/utc-one.mp4" poster="https://zachholman.com/images/talks/utc/poster-one.jpg">Your browser does not support the video tag.</video>
<h1 style="left:8vw; top:6vw; font-size: 5vw; color:blue;">
<div>What is</div>
<div>Time?</div>
</h1>
</figure>
and
* {
margin: 0;
padding: 0;
}
figure {
position: relative;
}
figure video {
width: 100%;
display: block;
}
figure h1 {
position: absolute;
}
Here is a codepen: https://codepen.io/tcurdt/pen/MXJpPr/
Is this a well know bug in Chrome? Is there a work around?
This was fixed in a recent build. Updating Google Chrome fixed it. So simple.
This question already has answers here:
Disable download button for Google Chrome?
(11 answers)
Closed 5 years ago.
I am getting this download button with <video> tags in Chrome 55, but not on Chrome 54:
How can I remove this so no one can see the download button in Chrome 55?
I have used <video> tag to embed this video on my web page. So, I want some kind of code to remove this download option.
Here is my current code:
<video width="512" height="380" controls>
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
Google has added a new feature since the last answer was posted here.
You can now add the controlList attribute as shown here:
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
You can find all options of the controllist attribute here:
https://developers.google.com/web/updates/2017/03/chrome-58-media-updates#controlslist
This is the solution (from this post)
video::-internal-media-controls-download-button {
display:none;
}
video::-webkit-media-controls-enclosure {
overflow:hidden;
}
video::-webkit-media-controls-panel {
width: calc(100% + 30px); /* Adjust as needed */
}
Update 2 :
New Solution by #Remo
<video width="512" height="380" controls controlsList="nodownload">
<source data-src="mov_bbb.ogg" type="video/mp4">
</video>
As of Chrome58 you can now use controlsList to remove controls you don't want shown. This is available for both <audio> and <video> tags.
If you want to remove the download button in the controls do this:
<audio controls controlsList="nodownload">
This can hide download button on Chrome when HTML5 Audio is used.
#aPlayer > audio { width: 100% }
/* Chrome 29+ */
#media screen and (-webkit-min-device-pixel-ratio:0)
and (min-resolution:.001dpcm) {
/* HIDE DOWNLOAD AUDIO BUTTON */
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio {
width: 420px;
}
}
/* Chrome 22-28 */
#media screen and(-webkit-min-device-pixel-ratio:0) {
#aPlayer {
overflow: hidden;width: 390px;
}
#aPlayer > audio { width: 420px; }
}
<div id="aPlayer">
<audio autoplay="autoplay" controls="controls">
<source src="http://www.stephaniequinn.com/Music/Commercial%20DEMO%20-%2012.mp3" type="audio/mpeg" />
</audio>
</div>
Hey I found a permanent solution that should work in every case!
For normal webdevelopment
<script type="text/javascript">
$("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
$( document ).ready(function() {
$("video").each(function(){
$(this).attr('controlsList','nodownload');
$(this).load();
});
});
$ undevinded? --> Debug modus!
<script type="text/javascript">
jQuery("video").each(function(){jQuery(this).append('controlsList="nodownload"')});
</script>
HTML5 videos that has preload on false
jQuery( document ).ready(function() {
jQuery("video").each(function(){
jQuery(this).attr('controlsList','nodownload');
jQuery(this).load();
});
});
Let me know if it helped you out!
As for current Chrome version (56) you can't remove it yet. Solution provided in other posts leads to overflowing some part of the video.
I've found another solution - you can make the preceding button to overlap the download button and simply cover it, by using this technique:
video::-webkit-media-controls-fullscreen-button {
margin-right: -48px;
z-index: 10;
position: relative;
background: #fafafa;
background-image: url(https://image.flaticon.com/icons/svg/151/151926.svg);
background-size: 35%;
background-position: 50% 50%;
background-repeat: no-repeat;
}
Example: https://jsfiddle.net/dk4q6hh2/
PS You might want to customise the icon, since it's for example only.
May be the best way to utilize "download" button is to use JavaScript players, such as Videojs (http://docs.videojs.com/) or MediaElement.js (http://www.mediaelementjs.com/)
They do not have download button by default as a rule and moreover allow you to customize visible control buttons of the player.
I solved the problem by covering the download button of a audio controller with a transparent div that changes the symbol of the mouse-cursor to "not-allowed".
The div blocks the activation of the download button.
Height: 50px, Width: 35px, Left: (document-right -60), Top: (same as the audio controller).
You must set the z-index style of the div above the z-index of the audio-controller.
See sapplic.com/jive66 for an example that works for chrome on win7 and on win8.