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.
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.
I am using Selenium to test the functionality of web page. A Valve appears open or closed by loading the appropriate PNG file . I need to check if valve is open or closed by checking if right PNG file is loaded
How to do that with Selenium . The Xpath remains the same when either of images are loaded
Here is code behind code for that element
Blockquote
<div comp_type="CustomizedComponent" show_function="loadCustomizedComponent" class="server_binding textCenter" style="position: absolute; left: 521px; top: 26px; width: 84px; height: 50px; text-align: center; background-size: 84px 51px; transform: rotate(0deg); background-image: url("img/DD6E3CB1.png"); z-index: 15; background-repeat: no-repeat;" range="129" address="3" type="1" length="1" on_text="" off_text="" id="157235533478328" show_param="157235533478328" degree="0" tag_id="Private Tag" on_image="img/10F9F7E8.png" off_image="img/DD6E3CB1.png" mode="false">
'
Blockquote
Thanks
Try this
string backgroundImg = Driver.FindElement(By.Id("157235533478328")).GetCssValue("background-image");
if (backgroundImg.Contains("DD6E3CB1.png"))
{
//Off image
}
else
{
//On image
}
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
I've create a website and with the viewpoint metatag, I've set the content with to 1200px, <meta name="viewport" content="width=1400, initlia-sclae=1.0, user-scalable=yes">.
Well it's work fine, but now I have to create an iframe (in an external site) with my site in it. But the space available to me is smaller than the content width, so you have to scroll horizontaly to view all.
I've tried do this: <iframe src="http://tlicetlac.tumblr.com" width="800px" height="400px" style="-webkit-transform:scale(0.9);-moz-transform-scale(0.9);"></iframe> but didn't work because resized the iframe's display area too.
So, can I for example set multiple viewpoint to resize the content for multiple web sites?
I tried your code and it worked fine .
you can see here Resize external website content to fit iFrame width
i used it to resize a world clock map from another web site to my web site.
here is my code:
<div id="containerworldTime">
<iframe src="http://24timezones.com/" width="992" height="500" scrolling="no" ></iframe>
</div>
#containerworldTime {
height: 395px;
margin:auto;
overflow: hidden;
width: 770px;
border:red solid 5px;
}
#containerworldTime iframe {
border: 0 solid;
height: 1103px;
margin-left: -110px;
margin-top: -385px;
width: 979px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);
}
and see this example
<div
style="
overflow: hidden;
display:inline-block;">
<iframe
src='https://en.wikipedia.org/wiki/Punding'
scrolling="no"
frameBorder="0"
style="
width: 660px;
height: 1000px;
margin-top: -180px;
margin-left: -200px;
-webkit-transform:scale(0.8);
-moz-transform:scale(0.8);
-o-transform:scale(0.8);
-ms-transform:scale(0.8);"
></iframe>
</div>
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.