I would like to show a video inside a web browser, in full screen using HTML5 tags.
Here my online test, that you can run and see the source code:
http://rospo.altervista.org
My problem is that I am unable to avoid margins (blank borders),
in other words I can't obtain a real FULL SCREEN
In the screeenshot here below I show the unwanted margins:
Any idea to get a full-full-screen ? :-)
BTW, double clicking on the image
I get finally a real full screen but I think in this case come in the game thge flash player, isn't it ? The point is that i would like to visualize the full screen video also froma a smart/phone/tablet browser (without any flash player ....)
Many thanks!
giorgio
I've checked the HTML in your page and if it doesn't contain any PHP coding with markup, then I would suggest you make the body margin to zero
CSS
body{
margin: 0;
padding: 0;
}
I believe in your css you have the page body with 8px margin.
UPDATE after the PO comment in this answer
to get the scroll bar out, you need to modify the height property value in you inline style of your <video> markup in this line
<video autoplay="" loop="" controls="" style="width: 100%; height: auto;">
the line should be
<video autoplay="" loop="" controls="" style="width: 100%; height: 100%;">
I believe this should solve this precise problem.
P.S. general advice: always separate your style from your HTML in an external .css file to make it easy for you to change and update the look and feel of your website.
Related
Is it possible to specify ¶mters=whatever type stuff for <iframe> in CSS?
I want to embed multi-track audio from archive.org. So for example, something like this:
<iframe src="https://archive.org/embed/art_of_war_librivox&playlist=1&list_height=200" width="100%" height="200"></iframe>
These bits are easy to do in CSS
.multitrack iframe {
width: 100%;
height: 200px;
}
But what about &playlist=1&list_height=200? Does that have to be done in HTML every time? I want to get it down to just:
<div class="multitrack">
<iframe src="https://archive.org/embed/art_of_war_librivox"></iframe>
</div>
I want to embed it on AO3.org, which is extremely stringent about what we're allowed to use. So please no "use this entirely other tool to solve your problem!" this time. If I can't do it with CSS, I'm pretty sure I can't do it at all.
I don't think there is a CSS based solution to your problem.
Your &playlist=1&list_height=200 is telling the iframed site iself (via GET request) that you want the first playlist and a playlist height of 200px to be rendered.
My website is www.rosstheexplorer.com.
The FB widget was to big for my widget area so I used the below code to adjust the width of the two sections of my page.
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
I also modified the Penscratch theme so the custom header and navigation menu extend across the whole page.
An unintended consequence of all these changes is now when I zoom out on my website there is a massive imbalance of white space on both sides of my site.
I want to try and center align the content - area and widget - area.
I have not tried any possible solutions because I have been unable to find any information on Google to point me vaguely in the right direction. All the information I found on Google was related to other themes or just related to centering individual pictures, text and headers.
Update -
I tried one suggestion below. Now my code looks like this -
<div class="full-screen-template">
#primary.content-area {float: left;width: 70%;}
#primary.content-area .site-main{width:100%;}
.widget-area{float:right;width:30%;}
</div>
#page {
margin: 0 auto;
}
<div class="mobile-template">
#primary.content-area {float: left;width: 100%;}
.widget-area{float:right;width:100%;}
</div>
Unfortunately it has not seemed to solve my problem.
Try this to center align the content and widget area:
#page {
margin: 0 auto;
}
UPDATE:
I think the reason it doesn't work is that you have HTML code inside .css file:
<div class="full-screen-template">
....
</div>
This probably stops the browser to go any further, so it never reaches the #page line.
I'm not sure what you try to achieve with HTML in css file but try to remove it to see if it fixes the issue.
I am building one single website for both mobile and desktop.I am using the Fixed position for the header to satisfy the navigation requirement(like scroll spy).It is working fine in desktop version.When i try to browse the same in mobile version,since i made the min-width:850px; the content is not showing up properly in the mobile.Because of the fixed position i cannot able to drag to the header also.
I have found that http://www.visualstudio.com/en-us/downloads this MS website follow the same, when i minimize the website i am having the same problem.But when i load that page in mobile , the webpage loads in complete zom out mode,but mine zoom in and fits the page to the mobile browser.I wounder there must be some trick to make the page zoom out completely, so that while loading in the mobile it wont break.
If anyone have any idea, pls share. I have made a simple fidle to demonstrate my problem.
http://jsfiddle.net/rg46D/6/
<div style="position: fixed; height: 70px; background-color: lightcoral;width:100%;min-width:950px">
P.S: i cant change the minimum width of the page.
Try removing the min-width and place some padding on the navigation container instead:
<div class="header" style="position: fixed; background-color: lightcoral;width:100%;">
Home
Links
About
Link1
Link2
LInk3
</div>
Then the CSS:
.header {
padding-bottom: 20px;
}
http://jsfiddle.net/rg46D/7/
Nice learning for me.I found the problem by myself.If you are not following the responsive design and having some of fixed width , never use this tag.
<meta name="viewport" content="width=device-width" />
I have removed it , it is working just like desktop in mobile..
So I'm busy with my first webpage and after a while added an audio element that works perfectly,
The only problem I'm having is that I can't lower the element in that way that it is on the bottem of my page.
I tried:
Googling for a very long time,
asking other people with more knowledge then me,
(worked but make a mess) Use <br> alot of times
These are my HTML and CSS code, if you need more please ask ;)
Also i dont want to know more then that, im busy learning and the best way to do that is doing it yourself. only with this i got very stuck.
HTML
<audio src="music.mp3" controls>
<embed
src="music.mp3"
width="300"
height="90"
loop="true"
autostart="false" />
</audio>
CSS
audio {
top:1200px;
vertical-align: bottom;
}
BTW: also tried margin-bottom, but it didn't work
Just use margin-top to lower the element:
audio {
margin-top:50px;
Example:
http://jsfiddle.net/CTD58/
top:1200px; only works when you declare position:absolute, position:relative or position:fixed.
Either add one of these positions declarations, or add margin-top instead of top.
Alternatively, wrap the audio element in a div and position that div how you want.
I'm working on a facebook tab that includes an iframe showing content from another website. I've narrowed the iframe down to only showing the part of the website that I want it to and disabled scrolling. In addition to that, I'd like to disable the links in the iframe content, and I've read that it should be possible by adding a transparent .png background image to a div containing the iframe and setting the iframe's z-index to -1, but the iframe is still in front of the image.
So far my css looks like this:
<style type="text/css">
iframe
{
z-index:-1;
}
.bgimg {
background-image: url('transparent.png');
}
</style>
and my html like this:
<div class="bgimg" style="overflow:hidden; width: 700px; height: 100%;margin:auto;">
<iframe src="http://www.url.com/site.html" width="1100" height="700" seamless="seamless" frameborder="0" scrolling="no" style="margin-top:-230px;"></iframe>
</div>
I'm using this to give a direct link to my amateur soccer team's league table, instead of manually having to update the tab each week with all the new information, but I don't want it to be possible to click on each team for team information - just the League table.
I've read several places that this should be possible, but haven't been able to find a functioning code - also read a few places saying it's impossible, and yet some others that say it can only be done using jQuery (which I know nothing about).
If anyone has any alternative solutions to what I'm doing now - please let me know.
Keep in mind that z-index only works for positioned elements (can be relative though.)
See: http://www.w3.org/TR/CSS21/visuren.html#z-index:
Applies to: positioned elements