I found the designer page on http://www.videojs.com/ there you can change the position of the start button to be in the middle of your clips.
But I am not able to place or use this stylesheets on the video.js player. Could some one explain how to use it in the player. E. G. to extend the existing css with an extra file? or how to change the existing css to place the button not on the left top but in the middle?
Thanks. Katasun
You can add 'vjs-big-play-centered' to video class.
<video id="player" class="video-js vjs-default-skin vjs-big-play-centered" controls preload="auto" width="700" height="450" poster="http://www.videojs.com/img/poster.jpg"><source src="" type="video/mp4"></video>
Using version 4.1.0:
In video-js.css, in .vjs-default-skin .vjs-big-play-button (line 484+) replace:
top: 2em;
left: 2em;
margin: 0;
with:
top: 50%;
left: 50%;
margin-left: -6em;
margin-top: -4em;
-6em and -4em because the width is 12em and height is 8em
Just had the same problem and had to fix it this way :) Works on the latest chrome, firefox, safari and opera, didn't test on IE, i'm on OSX
I have amended a version of videojs where you can place the play button anywhere. This also means being able to touch the thumbnail anyway on IOS devices (doesn't have to be the center) and it will run the video. http://www.andy-howard.com/recreate-bbc-iplayer/index.html
Related
I get the video control panel but there's no video loaded in the browser. Tried mp3, as well. Coded as follows:
video {
width: 15%; height: auto; float: right; padding: 1rem;
}
<body>
<video controls>
<source src="images/Manny4.wmv" type="video/x-ms-wmv">
</video>
</body>
Firefox and other browsers do not support WMV videos. https://support.mozilla.org/en-US/kb/html5-audio-and-video-firefox
Converted file to webm format and it worked, therefore, i accept it as a solution. I'm still trying to learn protocols; I will do better in the future.
THERE IS AN EDIT AT THE BOTTOM - look for "===== EDIT ===="
I am putting a fixed division at the top of the page. No problem with positioning it, but a problem comes up when I test the page by scrolling up and down.
Everything is fine with Chrome and IE but FF has a problem. The problem is that lines are "lost" under the fixed division. That is, the page is scrolled too far.
Here is the test page The entire source for the page is at the bottom of this question.
The division on the test page has width: 80%; margin-left: 50px; and opacity: 0.5 This allow you to see the lines underneath the division.
Go to the test page and highlight the last line at the bottom of the viewport. Highlighting the last line makes it easy to spot when you PgDn.
Now PgDn (or click the scroll bar - the bar, not the slider)
You can repeat the highlighting and PgDn and it should behave the same way.
With Chrome and IE, the highlighted line will still be visible, more importantly the lines following it will be visible.
With FF, the highlighted line, and one or two of the lines after it, winds up underneath the fixed division. The lines after the highlighted line are lost - not visible.
I've see this done successfully on other sites but I can't figure out what they are doing to make it work.
This page works correctly with FF, Chrome, and IE. There are others but I can't seem to find them right now.
Here is a page with the same problem as my test page It is different in that it "floats" the division until it is scrolled to the top and then it "fixes" it at the top. I've done this same float/fix thing and it also has the problem with FF. The test page I pointed you at, above, simply fixes the division to start with.
The funny thing about that page which has the same problem as mine is that it is a demo of how to put a fixed division at the top of the page and it doesn't work for FF
Another page with the problem of losing lines under the fixed division is yahoo.com. Lines are lost under the fixed division pretty much as is happening on my test page, but yahoo "loses" more lines than my test page.
Does anyone have any idea how to fix a division at the top and not lose lines underneath the division, lines which should be visible after the scroll? My test works for Chrome and IE but not for FF.
AND - wasn't there a code snippet link on the question page which you could use to provide demonstration code? I don't see it on this page where I'm typing the question.
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<title>Scroll Test</title>
</head>
<body style="margin-top: 0px;">
<div style="clear: both; opacity: 0.5; margin-left: 50px; width: 80%; background-color: red; top: 0px; position: fixed; height: 50px;"></div>
<div>
<script type="text/javascript">
for (i = 0; i <201; i++) {
document.writeln("*** " + i + "*************************************************************************************<br>");
}
</script>
</div>
</body>
</html>
By the way - the division (with the pink background) at the right hand side of this page has a problem when it get's fixed to the top of the viewport - the top is cut off. The only way to see the top is to scroll back up to the top of the page. This happens in FF, IE, and Chrome.
Where should I report this problem - about the "ask question page" - and provide the details?
===== EDIT ====
Thanks to user3137702, who told me to change the division to 100%. When I did that, the scrolling worked but initially when the page is loaded, lines #1 and #2 were under the fixed division.
I had the body set to margin: 0px; I changed that to margin-top: 50px; to make the first lines visible. I wasn't worried about the other margins - left, right, bottom, that's why I just changed the margin: 0px; to margin-top: 50px; - easiest to type.
but that through me back into the original error. After playing with it for a while, I found that unless margin-left: 0px; is set on the body tag, the scrolling won't work.
So, the complete solution is to have the fixed division set to width: 100%; and the body set to margin-left: 0px; and margin-top: nnpx, where nn is the height of the fixed division.
I'll add some JavaScript to set the body top margin based on the height of the fixed division so I don't have to mess around with it if the height of the fixed division changes.
I originally had width: 80px; on the division because I want the fixed division to show as less that the body width and centered.
I took the code that solves the problem and added a second division under the fixed division. The fixed division has background-color: transparent; and width: 100%. The nested div is where the content is and is set to width: 80% margin-left: auto; margin-right: auto to center it.
Now the it displays as I want it to and it scrolls properly.
Here's the new definition of the body down to the close of the fixed division's tag:
<body style="margin: 0px; margin-top: 50px;">
<div style="width: 100%; background-color: transparent; top: 0px; position: fixed;">
<div style="width: 80%; margin-left: auto; margin-right: auto; background-color: red; height: 50px;">
Contents of the child division within the fixed division
</div>
</div>
<div>
Here is a page incorporates all of the changes
Again, thank you user3137702, I'll select your answer.
Hold everything
I just played with the fixed page and have found that IE, FF, and Chrome all start to have problems with the scrolling as the viewport becomes shorter - as would happen if you resize the browser window or pull up something like FireBug.
I'm not going to spend any time figuring out the size that causes the browsers to start misbehaving, it would be a waste of time. Suffice to say IE and Chrome start having problems at larger heights than does FF. But the sizes are something that it is unlikely anyone will ever encounter. The viewport has to get pretty short to start the problems.
I can't explain exactly why it's happening, but it's the width that's messing up firefox; If you set the width of your fixed div to 100%, it works as you would expect.
<div style="background-color: red; top: 0px; left: 0px; position: fixed; height: 50px; width: 100%;">
</div>
Running into an issue with safari. For some reason, the footer is disappearing under the video until you hover over where it should be. Once you do that it pops into place and works normally. In order to replicate it, have the footer out of view, and reload the page, or click into a backpage and click back to home.
Tested on multiple Macs (MacPro using 1080p monitor, Macbook Air, and Macbook Pro) using all browsers, and the video works fine in Opera, Chrome, Firefox, even IE (parallels) but not safari. Windows machines have no issues using all browsers Chrome, Firefox, Opera, and IE.
The video background is being built onto a WordPress site using underscores as the base for the theme that I'm building.
The below URL is whats giving me fits.
http://yokellocalhosting.com/freddy/
Here is how I have the background setup in the HTML:
<?php if(is_front_page() ) { ?>
<div id="videoContainer">
<video autoplay loop id="videoBackground" preload="auto">
<source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_MP4.mp4" type="video/mp4" />
<source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_OGG.ogg" type="video/ogg" />
<source src="http://yokellocalhosting.com/freddy/wp-content/uploads/2014/03/Fabulous_Freddys_Background_WEBM.webm" type="video/webm" />
</video>
</div>
<?php } ?>
Here is the associated CSS:
#videoContainer{
position: fixed;
left: 0px;
top: 0px;
z-index: 9;
width: 100%;
height: 100%;
}
#videoBackground{
position: relative;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 9;
}
I know I have the MIME types for the server setup correctly. Just can't figure out what the issue is and why its doing what its doing.
I'm trying to get a nice fullscreen image background for my website. It's working fine in almost every browser I tested in (browsershots.org), but in Chrome on my Android tablet it's not working as expected. As you can see there's a lot of white in the background, where it should be all image.
Link : http://test.socie.nl
CSS :
body {
background: url(../../images/background/image1.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Unexpected result :
It appears to be a four year old bug that the Android/Chrome team are ignoring:
https://code.google.com/p/android/issues/detail?id=3301
http://productforums.google.com/forum/#!topic/chrome/l6BF3W0rymo
I've tried every solution I could find mentioned in those links and other places; all fail on Android 4.3 Chrome 30. All fail even worse on Android 2.3 native browser.
The one I am going with is:
.body{
background:#fff url(background.jpg) no-repeat fixed center;
background-size:cover;
}
(I.e. that CSS moved out of body into a class called "body"), and then in the HTML I have:
<body>
<div class="body">
...
<div class="ftpush"></div><!--Part of keeping the footer at the bottom of window-->
</div><!--end of "body"-->
<div class="footer"></div>
</body>
</html>
(BTW, the technique you can see there, to keep the footer at the bottom of the window, does not appear to be causing the problem, as in my first set of experiments I'd stripped that out.)
Aside: I was surprised to see Firefox for Android also misbehaves with background-size:cover. Are they sharing the same rendering engine?!
There is update to the method posted above (as published here).
html {
background: url(images/bg.jpg) no-repeat center center fixed;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
}
Though the issue in the original question still persists despite the update. What worked for me was adding full width and height to the html CSS in addition to the above:
html {
width: 100%;
height: 100%
}
Solved by adding the following:
html {
height:100%;
min-height:100%;
}
body {
min-height:100%;
}
Instead of a background image, try using an <img> instead:
HTML :
<img src="imagepath" id="your-id" />
CSS :
#your-id{
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
z-index: -999;
}
Actually ALL I needed if your using html tag is to add:
height: 100%;
...with the caveat that still the image will resize a bit when you scroll the menu bar out of view, but I think all of other answers also have that issue.
I have a large content needs to be put in SettingFlyout. The problem is SettingFlyout too small for it. How to add vertical scrollbar for it?
Update: Javascript Metro app.
The UX recommendation for that scenario would be to break the settings into multiple flyouts. You really shouldn't put that many settings into a single window.
If you must do it, then wrap the content in a ScrollViewer for XAML or <div class="ms-scrollview" style="style="height: 100%; width: 300px; overflow-x: hidden; overflow-y: visible;"> for HTML.