I am currently learning to use videos as a background on the websites I am developing. The issue that I am having is that I can't get the videos to actually appear. I believe it has to do with the way I have them stored in a folder, but after trying multiple different methods of accessing the files, I still can't get them to display. The goal is to have the video stored in the "videos" folder to be displayed as my page background. My question is, what elements am I missing for this to work? I have tried moving the files into the main folder as well as adjusting the CSS a few times. Both yielded no results.
My current setup is as followed:
My files are stored like this (I apologize for the link, I can't embed images yet):
File Hierarchy
backgroundVideo {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: URL(images/resBackground.jpg);
background-size: cover;
}
<body>
<video autoplay loop class="backgroundVideo">
<source src="videos/resVideoBackground.mp4" type="videos/mp4"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.webm" type="videos/webm"/>Your browser does not support the video tag! Please upgrade your broswer!
<source src="videos/resVideoBackground.ogv" type="videos/ogv"/>Your browser does not support the video tag! Please upgrade your broswer!
</video>
</body>
Any guidance on how to get the video running is greatly appreciated!
Your file hierarchy and the way you are referencing your files from your CSS and HTML looks fine to me.
I notice a couple things right off the bat. The first is that, in your source elements, the proper type is a singular video/mp4, video/webm, and video/ogv.
Another common tactic when implementing background videos into websites is to add a little JavaScript that "kicks" them on browsers that don't like the autoplay attribute. For example (you'll need to add an id="backgroundVideo" to your video element for this to work):
<script type="text/javascript">
// Play the background video on Android devices that support the
// "canplay" event listener
var backgroundVideo= document.getElementById('backgroundVideo');
backgroundVideo.addEventListener('canplay', function() {
backgroundVideo.play();
});
</script>
I would add this script element, either externally or inline, at the very end of the body.
Related
I am noticing that adobe echosign is setting default minimum height and width using pixels while generating the Iframe for Personal Embedded widgets. I checked the below link (& other REST api documentations) and can't find a property to tell echosign to render the widget in a scalable mode according to width/height dimension of the device as in mobile, tablets or PC.
Api Documentation->
https://secure.na1.echosign.com/public/docs/restapi/v5#!/widgets/createWidget
Adobe EchoSign default Iframe Render setting->
<iframe src="******" width="100%" height="100%" frameborder="0" style="border: 0; overflow: hidden; min-height: 500px; min-width: 600px;"></iframe>
How to tell echosign REST api to dynamically adjust it's Iframe size?
I tried finding a solution to this also, but the short of it is that it can't be done with their widgets. None of their internal settings or the API allow a way to modify the iframe styling.
What does work, however, is adding a little javascript and css to modify the iframe. Here's an example of javascript code you can use:
document.getElementsByTagName("iframe")[0].setAttribute("id", "echosignwidget");
document.getElementByID("echosignwidget").removeAttribute("style");
By adding an id and removing the inline style attributes you are now free to style the element however you please using CSS.
I'm currently developing a complex print style sheet which is in some ways different from the HTML currently displayed on screen. I've hit a hurdle with a balance between performance and achieving the desired layout.
Basically there is a gallery of images which are loaded via javascript on the fly. Images are built dynamically via JS and output to the DOM on each request for the next image.
My problem lies in that I need to build this for printing purposes. I think I'm left with a scenario where I will have to build additional html on the page just for the print page to look correct; that isn't so much of a problem, except the images are rather big, and even using "display:none" and media print { display:block; } won't prevent the images from being downloaded on desktop devices behind the scenes by the browser. In essence I need them to stay dormont on screens, and come to life using print styles.
I had considered using the css background-image property - which I believe doesn't cause the image to load in the browser, however background image doesn't seem to reliably print across different browsers.
I've also tried using onbeforeprint javascript, but again, this is mess of browser inconsistency.
Can anyone suggest any sort of solution for this? at the moment it seems like I'm going to have to suck up the additional overhead of all the images to achieve reliable results.
If background images are an option, you could prevent the download of those when setting the parent element of the image container to display: none
Example HTML:
<div class="invisible">
<div class="img-container">
</div>
</div>
Related CSS:
.invisible {
display: none;
}
.img-container {
background: url(img.xyz);
}
#media print {
.invisible {
display: block;
}
}
Apart from that a similar question had been asked: Prevent images from loading
May be that will help you, if background images are definitely NOT an option.
So I'm running a social network site, in which I've installed plugins and modules that allow users to edit their fan pages by having their own CSS editor ( a style box ) This is for Social engine.
I originally had a main menu that had images for links but were referenced via html src vs css
i.e <img src=""> vs .div { code } in order to allow users to alter the layout via CSS I created classes for each image so that they could be overwritten.
For this I stumbled across an article ( I don't have the link ) on stackoverflow bringing up how to change an image using CSS which lead me to the <img class=""/> and using
.customtag {
content:url("http://pathtoimage"); }
in order to modify it.
It shows up GREAT in chrome and IE, but in Firefox it is simply not registering and all I see is the text + the description for the alt="" tags.
I've been searching for a few hours but unable to find an exact match to this. So I'm posting this here to see if anyone could lead me in the correct direction. I've also tried declaring the !DOCTYPE as well as using <style> vs <style type="text/css">
While using the css validator shows other areas, nothing related to the current lines of code as to why its not rendering. In firebug it doesn't even show the CSS registering at all it seems.
Any help is greatly appreciated.
http://fmlstudios.com/testdesign/
I've removed the menu code from my site and put it into a separate html file in the link above as to single out my issue. Any help is greatly appreciate and or pointing me in the correct direction. Thank you for taking the time to read.
Since Firefox doesn't understand or comprehend the content: url(); fully as it expects an image from the <img class=""/> you'll need to utilize background: url(); instead as this is accepted in all browsers.
I.e.
.someimageclass { background: url(pathtoimage); }
`
This will cause firefox to load a an image but it will have a black border box around it due to the fact it's looking for the original image specificed in <img class=""/>"
To make a workaround create or google a "blank.gif" 1x by 1px and edit the img class to
<img class="someimageclass" alt="" src="blank.gif"/>
Now the box will dissapear and this will be your workaround.
Hope this helps anyone else out there that's been going nuts over this.
I use NextGEN Player Template plugin, It is great plugin, but it shows portrait pictures in landscape mode. In other words, plugin takes the central part of the image and shows it as landscape orientation image.
And it is not the nextgen gallery issue, because this another plugin works with nextgen gallery too, but as we can see on third screenshot, it shows portrait images in portrait orientation. But this plugin has another problems, so I can't use it.
So, I need to see portrait orientation pictures in portrait orientation using NextGEN Player Template plugin. Cam anyone help?!
Answer for last comment with picture:
My advice is to upload or see an example of the plugin. Then look at the source code with either chrome's or fire foxes "Inspector", they allow you to see each element and what they do with the page. Then find the DIV that is containing the image or Style that is editing the image itself. And then edit it accordingly. Though since this is a plugin there is probably a piece code that applies this to each div so you will need to track that back also. Or find someone who is willing to look inside all of your code. but perhaps research a little first and look into your code.
Ok i looked through your code there.
Try changing this
$('div.gv_panel').live('click', function() {
$.fancybox({
autoScale: true,
to false.
Also these things apply to changing the image.
<div id="ngg_player_bg_changer" class="ngg-player-bg-changer" style="display: block;">
<div class="gv_panel" style="width: 564px; height: 400px; left: 0px;"><img style="visibility: visible; width: 601.504px; height: 400px; top: 0px; left: -19px; display: inline;" src="http://piotr-tokarczyk.pl/wp-content/gallery/player-1-2/g7.jpg"></img></div>
Holds all the different images i think
Hope this helps :)
As the plugin is being actively developed, I would certainly suggest posting in http://wordpress.org/support/plugin/nextgen-player-template as Piotr seems to respond fairly quickly.
http://jsfiddle.net/fJkBU/1/
That's my code. Basically, I have an iFrame whose source may change. I need the containing DIV to expand vertically to accomodate whatever is inside the iFrame.
I can't get it to work. Any ideas?
MY CODE
<!DOCTYPE html>
<html>
<head>
<title>Ruby on Rails: Welcome aboard</title>
</head>
<body>
<div id="page">
<div id="content">
<div id='commentLoader' style="width: 500px;">
<iframe id="commentIframe" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
</div>
</div>
</div>
</body>
</html>
All the other methods will not work, because...
...Mozilla (and all other major browsers, as pointed out in paislee's comment) has this thing called the "Same Origin Policy" which states:
The same origin policy prevents a document or script loaded from one
origin from getting or setting properties of a document from another
origin.
Essentially, Mozilla makes sure you cannot access another webpage's properties thru JavaScript because that would be a security hazard (for cookie hijacking and such I believe).
For example, here was a similar question when discussing an iframe for a page of the same origin; here is the answer as applied to your problem. As you can see in Firefox's error console, your "permission denied to access property document"...
Ok, so you have a couple of options now that you know you can't access the iframe's height thru JavaScript (because it is hosted on another domain):
Change it so you do control the contents of the iframe (then either put it under the same domain or use the solution posted in the similar question).
Assuming 1 is not possible you have to use your server to access the webpage. The first option here would be to screen scrape the contents of the iFrame and then display it
If you aren't up for writing a screen scraper you could use a proxy script and then display an iframe of your proxy (hosted on the same server); this would permit you to access the site as if it we're your own and the user would notice no difference (Note: I'm pretty sure this is against all terms of service/possibly illegal as the user could try to interact with the website (unaware it is loaded thru a proxy) in the iframe (i.e. login)... and you would effectively be phishing)
I am assuming that what is loaded in the iframe is a set of comments (IDs kind of gave it away), and I will also take the liberty of assuming each comment has a fixed height or maximum height. In which case you could write a php script that loads the page, counts the amount of comments (regex) and then multiplies number that by comment height to determine the appropriate height of the iframe
Good luck,
At the very most you'll get an iFrame to be the size of the window, not the contents' height. And, as you seem to want it to expand, why not just make the iFrame 100% height of the window from the start?
If the iFrame's loaded from the same domain you can try the Iframe SSI script II. I used this script way back for a class project but you can give it a shot.
I'm not sure I get your answer 100%, but if you want a container that expands vertically due to the content you can use jquery ajax. when you load content inside a it will generate a new height. give this div some style, and you have yourself a dynamic generated div height. basically, you will take this other page and put it on yours.
Do a search for cross-domain ajax. I've used it in the past and it wasn't pretty but worked!
Call the below Javascript function in Iframe onload event.
function autoResize(id)
{
var newheight;
var newwidth;
if(document.getElementById){
newheight=document.getElementById(id).contentWindow.document.body.scrollHeight;
}
document.getElementById(id).height= (newheight) + "px";
}
e.g:
<iframe id="commentIframe" onload="autoResize('commentIframe')" src="http://www.amazon.com" style="border-style: none; width: 100%; height: 100%"></iframe>
You've got single quotes around your CSS id. Replace them with double quotes like the rest of your code.
Change:
id='commentLoader'
to:
id="commentLoader"