I'm trying to use video.js to embed videos into a website I'm working on, but for some reason, in Firefox, there is a margin between the top of the container the video is in and the video itself.
The page can be found here
It works fine in Chrome, so I don't know why it won't work properly in Firefox.
Found a solution.
Set the css for the container of the video to
position:fixed;
top:0;
bottom:0;
left:0;
right:0;
Related
I am working on one web application and learning Vue.js in parallel.
My site working correctly on Chrome, Firefox and Opera, but in Safari layout is moving around.
Myb .browserslistrc
> 1%
last 3 year
not dead
not ie 11
npx browserslist displays the correct list of browsers, including Safari, but it doesn't work fine.
What could be the problem?
I tried changing .browserslistrc
adding -webkit-box options to css
Generally understood.
The problem was not with Safari support per se, but with the non-working popup window setting
display: flex.
Changed to
display: table
and it worked
p:media component does not work in FireFox, but it works in Chrome and Opera.
I'm trying to display a PDF document, but nothing is displayed in FireFox.
Although the component in the tutorial is displayed for me: https://www.primefaces.org/showcase/ui/multimedia/media.xhtml
<p:media value="/resources/pdf/mypdf.pdf" width="100%" height="600px">
Your browser can't display pdf,
<h:outputLink value="/resources/pdf/mypdf.pdf">click</h:outputLink> to download pdf instead.
</p:media>
I have implemented CSS animation to have hover effect. In chrome it is working fine, but in firefox mozilla first time is working but next time there is no animation.
Please guide.
Please refer: http://www.theincredibleindiatourcompany.com.au/
Thanks
Ashish Bajpai
I am trying to display Video(played by HTML5 video tag) behind a windowless plugin(firebreath). Video was perfectly blended with plugin display (semi-transparent image is drawn) when GPU-acceleration was enabled (using Chrome flags) .
However, Plugin display went for a toss when video is played at present( with chrome flags enabled). Suspecting chromium updates causing this issue.
Similar Question # HTML display of Plugin and videotag
Any suggestions/work around for me to try out? Please help.
Testing some media queries in various browsers on Android and noticed Opera Mini 6.5 on my Samsung Galaxy S does not seem to apply stlyes inside the following code.
#media screen and (min-width: 320px){
It seems if I lower the value to 282, Opera Mini will excute the styles inside the media query.
#media screen and (min-width: 282px){
I'm wondering if anyone else has run into issues with Opera Mini not handling media queries correctly on Android phones. All of the other browsers I've tested on Android seemed to work fine with min-width:320px as well as my tests of Opera Mini on iOS devices.
I've set up a few test pages to check out with variations on the viewport meta tag.
h5bp Mobile 2 meta tags - goo.gl/XfEVx
h5bp Mobile 2 meta tags with maximum-scale set to 1.0 - goo.gl/mgKJA
h5bp Mobile 3 meta tags - goo.gl/uxPsa
h5bp Mobile 2 meta tags with maximum-scale set to 1.0 and Opera CSS viewport tag - goo.gl/McNhj
Viewport meta tag only -goo.gl/QMnmp
I noticed this issue on my Samsung Galaxy S Epic 4G in portrait orientation on Opera Mini 6.5.
According to Opera docs, Opera Mini 6.5 supports Media Queries and using Presto 2.8. The support of media queries in Presto 2.8 seems to be complete.
Did you try to play with the initial scale or device-width
<meta name="viewport" content="width=device-width"/>
or
initial-scale=1.0
I searched our Opera bug reports but I didn't see anything related to this. Do you have a link to a Web page so we can test further.
Do you see the same problem in all versions of Opera and IE9? Do you use Modernizr and Respond.js? I had a very similar problem, Respond.js was the source.
I solved it by bundling Modernizr and Respond.js into single file via http://www.initializr.com/.
Maybe this helps.