|
HTML - How Do You Make It So The Video Is In The Middle Of The Browser?
how do you make it so the video is displayed in the middle of the browser? (I already got it in the center but I want it in the middle of the browser as well) Thanks.
<center> <OBJECT ID="MediaPlayer" WIDTH="100" HEIGHT="100" CLASSID="CLSID:22D6F312-B0F6-11D0-94AB-0080C74C7E95" STANDBY="Loading Windows Media Player components..." TYPE="application/x-oleobject"></div></div> <PARAM NAME="FileName" VALUE="http://www.htmlcodetutorial.com/graphics/heart.avi"> <PARAM name="ShowControls" VALUE="false"> <param name="ShowStatusBar" value="false"> <PARAM name="ShowDisplay" VALUE="false"> <PARAM name="autostart" VALUE="true"> <EMBED TYPE="application/x-mplayer2" SRC="http://www.htmlcodetutorial.com/graphics/heart.avi" NAME="MediaPlayer" WIDTH="100" HEIGHT="100" ShowControls="0" ShowStatusBar="0" ShowDisplay="0" autostart="1"> </EMBED>10:00 AM 11/4/2008 </OBJECT> </center> Similar TutorialsI have a nice little HTML5 demo that plays a video in a canvas that is not displayed. As part of the demo, I copy "frames" from the hidden canvas into a resized canvas that is displayed. My "custom" code to manipulate the video frames works fine. What doesn't work depends on the browser, but also the source of the video. If the source of the video is on the local disk along with the html file, it plays fine and it loops fine in both Safari, Chrome. Opera and Firefox. If the source of the video is on the web, either as a local (to the website) where the html file is stored, or if the html file is local but the video is on the web, then Safari works fine. Chrome displays the video ONE time and then stops. The loop does not work. Remember, same code, works fine if all data is local. Changing the source URL of the video to a website is the ONLY change. Opera and Firefox do not display anything except the box rectangle when the video source is on the web. Firefox gives the error: Quote: Error: uncaught exception: [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) [nsIDOMCanvasRenderingContext2D.drawImage]" nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)" location: "JS frame :: file:///Volumes/Olorin/sliceNdice/demow.html :: processFrame :: line 34" data: no] No errors show up in Opera, but no video is displayed. The Code: (or a snippet, actually) Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head><title>HTML5 Video Deom</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script type="text/javascript">
var video;
var copy;
var copycanvas;
var draw;
var VID_WID = 640;
var VID_HIGH = 360;
var OUT_WID = 480;
var OUT_HIGH = 320;
function init(){
video = document.getElementById('sourcevid');
copycanvas = document.getElementById('sourcecopy');
copy = copycanvas.getContext('2d');
var outputcanvas = document.getElementById('output');
draw = outputcanvas.getContext('2d');
setInterval("processFrame()", 33);
}
function processFrame(){
//get video image
copy.drawImage(video, 0, 0);
// manipulate image here
draw.drawImage(copycanvas, 0,0);
}
</script></head>
<body onload="init()" style="margin:0px;">
<div><br/><br/></div>
<div style="display:none">
<video id="sourcevid" autoplay loop=loop>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/>
<source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/>
</video>
<canvas id="sourcecopy" width="640" height="360"></canvas>
</div>
<div>
<canvas id="output" width="480" height="320" style="border: solid 5px #666666"></canvas>
</div>
</body>
</html>
Works if all files are local, shows box outline if all files are on the web: Code: <video id="sourcevid" autoplay loop=loop> <source src="BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Fails: Code: <video id="sourcevid" autoplay loop=loop> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.mp4" type="video/mp4"/> <source src="http://catalystart.reststop.com/html5/BigBuckBunny_640x360.ogv" type="video/ogg"/> </video> Note: Safari works in both cases, as long as all files and website are reachable. Chrome works to play the video ONCE, then stops. Firefox and Opera show an empty outline, but no video. I'm not a cross-browser expert. I will accept any and all possible solutions to try. In the meantime, I will continue to see if I can find the problem. Obviously, I want it to work from a website. Hi there, I have put a youtube video source in dreamweaver, and was wondering if anyone could tell me how i make it so the browser window the video is in clings to the video, i.e the frame is the exact size of the video. Also, however this is done, would it be the same code with images? Thanks in advance, Rob Here is the code <body> <td><a href="<object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/NIktYSst2mw"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/NIktYSst2mw" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> </body> </html> How can I make one? I have a terrible problem how to make this page resize whatever the resolution of the browser. I've already did liquid layout via percent but the height doesn't do it. They want the content to be scalable in whatever browser dimensions they want. Kindly help me. Thanks. Here is the html: Code: <!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Porter House New York</title>
<link rel="shortcut icon" href="images/favicon.ico" />
<link rel="stylesheet" href="css/main.css" />
<script src="js/jquery.js"></script>
<script src="js/drop-down-menu.js"></script>
<!--[if IE]>
<script src="js/CreateHTML5Elements.js"></script>
<![endif]-->
<!--[if IE 6]>
<script src="js/unitpngfix.js"></script>
<![endif]-->
</head>
<body>
<header> <a href="index.html"><img src="images/logo_porter_house_new_york.png" alt="Porter House New York" class="logo" title="Porter House New York" /></a> </header>
<!-- end header -->
<nav>
<ul>
<li><a href="#" class="about" title="about">about</a>
<ul>
<li><a href="#" title="The Restaurant">The Restaurant</a></li>
<li><a href="#" title="The Chef">The Chef</a></li>
<li><a href="#" title="The Owners">The Owners</a></li>
</ul>
</li>
<li><a href="#" class="menus" title="menus">menus</a></li>
<li><a href="#" class="press" title="press">press</a></li>
<li><a href="#" class="photos" title="photos">photos</a></li>
<li><a href="#" class="private" title="private dining">private dining</a></li>
<li><a href="#" class="gift" title="gift certificates">gift certificates</a></li>
<li><a href="#" class="contact" title="contact">contact</a></li>
<li><a href="#" class="watch" title="contact">contact</a></li>
<li><a href="#" class="reserve" title="contact">contact</a></li>
</ul>
</nav>
<!-- end nav -->
<div id="content">
<div id="contentTop"> </div>
<!-- end contentTop -->
<div id="side"></div>
<!-- end side -->
<div id="main">
</div>
<!-- end main -->
<div id="contentBottom"> </div>
<!-- end contentBottom -->
</div>
<!-- end content -->
<footer>
<p>© Copyright 2007. Porter House New York. Powered by 2B-Unique.com</p>
</footer>
<!-- end footer -->
</body>
</html>
Here is the CSS: Code: /* ---------------------------------------- */
/* CSS RESETS */
/* ---------------------------------------- */
@import url('reset.css');
body {
background: #fff url(../images/bg.jpg) repeat-x center 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
/* ---------------------------------------- */
/* HEADER */
/* ---------------------------------------- */
header {
position: relative;
margin: 1% auto 0;
height: 20%;
width: 98%;
background: url(../images/header.png) no-repeat 0 0;
*background: url(../images/header_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
header img.logo {
margin: 3% 0 2% 3%;
height: 50%;
width: 25%;
}
/* ---------------------------------------- */
/* NAV */
/* ---------------------------------------- */
nav {
position: relative;
margin: 0 auto;
height: 28px;
width: 98%;
background: url(../images/nav.png) no-repeat 0 0;
*background: url(../images/nav_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
nav ul {
margin-left: 1.1%;
position: relative;
}
nav li {
position: relative;
float: left;
}
nav a {
display: block;
text-indent: -9999px;
height: 25px;
background: url(../images/nav_sprites.png) no-repeat 0 0;
}
nav a.about {
background-position: 0 0;
width: 73px;
}
nav a.about:hover {
background-position: 0 -25px;
}
nav a.menus {
background-position: -73px 0;
width: 85px;
}
nav a.menus:hover {
background-position: -73px -25px;
}
nav a.press {
background-position: -158px 0;
width: 83px;
}
nav a.press:hover {
background-position: -158px -25px;
}
nav a.photos {
background-position: -241px 0;
width: 98px;
}
nav a.photos:hover {
background-position: -241px -25px;
}
nav a.private {
background-position: -339px 0;
width: 145px;
}
nav a.private:hover {
background-position: -339px -25px;
}
nav a.gift {
background-position: -484px 0;
width: 166px;
}
nav a.gift:hover {
background-position: -484px -25px;
}
nav a.contact {
background-position: -650px 0;
width: 84px;
}
nav a.contact:hover {
background-position: -650px -25px;
}
nav a.watch {
background-position: -741px 0;
width: 252px;
}
nav a.watch:hover {
background-position: -741px -25px;
}
nav a.reserve {
background-position: -993px 0;
width: 121px;
}
nav a.reserve:hover {
background-position: -993px -25px;
}
nav ul ul {
position: absolute;
left: -10px;
top: 25px;
z-index: 900;
padding: 3px 0;
background-color: #ffffeb;
}
nav ul ul li {
float: none;
width: 143px;
}
nav ul ul a {
margin: 0 3px;
padding-left: 10px;
height: 16px;
width: 127px;
background: none;
color: #71462d;
font: normal 12px Tahoma;
text-indent: 0;
text-decoration: none;
text-transform: uppercase;
}
nav ul ul a:hover {
background: url(../images/submenu_hover.jpg) no-repeat 0 0;
color: #fff;
}
/* ---------------------------------------- */
/* CONTENT */
/* ---------------------------------------- */
#content {
position: relative;
margin: 0 auto;
overflow: hidden;
height: 304px;
width: 98%;
background: url(../images/content.png) repeat-y 0 0;
*background: url(../images/content_ie.gif) repeat-y 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
#contentTop {
position: absolute;
top: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_top.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.85%;
}
#contentBottom {
position: absolute;
bottom: 0;
left: 1.05%;
z-index: 100;
background: url(../images/content_bottom.png) repeat-x 0 0;
*background: none;
height: 2%;
width: 97.75%;
}
#side {
position: relative;
float: left;
display: inline;
margin-left: 1.1%;
height: 304px;
width: 19.62%;
}
#main {
position: relative;
float: right;
display: inline;
margin-right: 1.1%;
min-height: 276px;
width: 76.07%;
padding: 28px 0 0 12px;
}
/* ---------------------------------------- */
/* FOOTER */
/* ---------------------------------------- */
footer {
position: relative;
margin: 0 auto;
width: 98%;
background: url(../images/footer.png) no-repeat 0 0;
*background: url(../images/footer_ie.gif) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
footer p {
margin: 20px 0 0 11px;
display: inline-block;
text-indent: -9999px;
height: 50%;
width: 40%;
background: url(../images/copyright.png) no-repeat 0 0;
background-size: 100% 100%;
-o-background-size: 100% 100%;
-webkit-background-size: 100% 100%;
-khtml-background-size: 100% 100%;
-moz-background-size: 100% 100%;
}
Hey all, Is it possible to shut down video screen automatically after displaying the video? I mean, after video is over, is it possible to hide the video screen? ( I tried to use embed tag... <embed src="myVideo" autostart="true" /> ??) Thanks, Doron Okay, with frames, whenever there is a link that you want to open up in the parent browser rather than inside the frame, all you have to add to the link code is "target="_parent"". However, for INPUT BUTTONS(not links) this doesn't seem to be the case. This is my input button code: HTML Code: <input id="button" type="button" value="Submit!"> the input button is INSIDE A FRAME, and because of that, when I click on it- the link goes inside the frame... how do I make it so the input button links to the PARENT browser? Hello, first post. HELLO! my video widget playlist on my index is a different size on my index.php but the correct size throughout the rest of my site. Its quite annoying, can anyone shed any light on this issue? thanks. http://www.brewrecords.net HTML Code: <?php get_header(); ?>
<div id="content">
<div id="homepagetop">
<div class="textbanner">
<?php $recent = new WP_Query("cat=" .ot_option('hp_top_cat'). "&showposts=1"); while($recent->have_posts()) : $recent->the_post();?>
<h3><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h3>
<?php endwhile; ?>
</div>
<div id="homeslider">
<?php include(TEMPLATEPATH."/includes/slider.php");?>
</div>
<div class="homewidgets">
<?php if ( !function_exists('dynamic_sidebar') || !dynamic_sidebar('Homepage Top Right') ) : ?>
<div class="widget">
<h4>Widget Area</h4>
<p>This section is widgetized. To add widgets here, go to the <a href="<?php echo admin_url(); ?>widgets.php">Widgets</a> panel in your WordPress admin, and add the widgets you would like to <strong>Homepage Top Right</strong>.</p>
<p><small>*This message will be overwritten after widgets have been added</small></p>
</div>
<?php endif; ?>
</div>
</div>
<div id="homepage">
<?php include(TEMPLATEPATH."/sidebar_left.php");?>
<div class="homepagemid">
<h3><?php echo cat_id_to_name(ot_option('hp_mid_cat')); ?></h3>
<?php $recent = new WP_Query("cat=" .ot_option('hp_mid_cat'). "&showposts=" .ot_option('hp_mid_num') ); while($recent->have_posts()) : $recent->the_post();?>
<div class="homepagecontent">
<a href="<?php the_permalink() ?>" rel="bookmark"><?php the_post_thumbnail( 'home-thumbnail' ); ?></a>
<h4><a href="<?php the_permalink() ?>" rel="bookmark"><?php the_title(); ?></a></h4>
<?php the_excerpt(); ?>
</div>
<?php endwhile; ?>
</div>
<?php include(TEMPLATEPATH."/sidebar_right.php");?>
</div>
</div>
<!-- The main column ends -->
<?php get_footer(); ?>
I can't seems to be able to get it to a valign middle at oscommerce but on my html page it worked fine. Also why is the html page gray bar bigger than the oscomerce gray bar? Code: <table width="100%" height="30" align="center" border="0" bgcolor="grey"> <tr> <td class="bar1" valign="middle" height="100%"> <ul id="navlist"> <li id="active"><a href="/index.html" id="current">Home</a></li> <li><a href="index.php">Collections</a></li> <li><a href="/payment.html">Payment & Shipping</a></li> <li><a href="/about.html">About us</a></li> <li><a href="contact_us.php">Contact Us</a></li> </ul> </td> </tr> </table> Code: .bar1 {font-family:Arial, Helvetica, sans-serif; font-size: 14px; text-align:center;}
#navlist ul {margin-left: 0;padding-left: 0;white-space: nowrap;}
#navlist li {display: inline;list-style-type: none;}
#navlist a { padding: 15px 20px; }
#navlist a:link, #navlist a:visited {color: #fff;background-color: grey;text-decoration: none;}
#navlist a:hover{color: #fff;background-color: #6D6968;text-decoration: none;}
actual site http://janlevin.com.my/ i'm new so please be gentle! I have recently designed and put up a new website. url he http://www.thecomicstrippresents.webs.com it's the first time i have used photoshop to design a website and for a first attempt i dont think it looks half bad. i'm sure as well as looking a whole lot worse, it could look a lot better. first off can someone tell me the ideal resolution i need to save the images as some of the images are grainy and pixely. secondly, can someone suggest what i can use to put content in the mid section? a lot of the content is longer than the box allows so for the time being i have put an Iframe there, the iframe is ok temporarily but will be a bit of a as far as SEO goes and up until i changed to iframe i was coming up second page of a google websearch for 'The Comic Strip Presents' please can you someone help? cheers Em Hi I am trying to make the image "y.bmp" and the text "Yahoo" and the other text ">" in the middle (vertically) I tried "vertical-align: middle" but does not work may someone please help me here. here is my html thanks HTML Code: <div style="width: 100%;">
<table cellspacing="0" cellpadding="0" style="width: 100%;">
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
<img style="" src="y.bmp" />Yahoo!</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.yahoo.com">
></a>
</td>
</tr>
<tr style="height: 76px; width: 100%; background-image: url('rep.bmp'); background-repeat: repeat-x;">
<td>
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
<img src="g.bmp" />Google</a>
</td>
<td align="right">
<a style="display: block; height: 100%; width: 100%; vertical-align: middle;" href="http://www.google.com">
></a>
</td>
</tr>
</table>
</div>
Hi, I have a problem. I don't get my table in the middle of the page. can someone help me? <removed by me> Got it now, delete this topic please I have my Introduction with the title and all. Then i want my href links on the left side of the picture. However i can't seem to be able to do it.(this is a type of autobiographical site for web design, i am making it as a joke to the current assignment. HOWEVER my teacher isn't able to assist me with this...) Ok here is my code <html> <head> <title>A web site about nothing but video games</title> </head> <body> <h1 align="Center">Chairman of the world</h1> <h4 align="center">This is a site dedicated to Chairman Tide Oo</h4> <hr noshade="1"> <center> <img align="middle" src="http://www.dimensionsguide.com/wp-content/uploads/2009/11/Orange.jpg"> </center> <a href="_" >Link 1</a> <p>Yes and yes</p> <a href="_">Link 2</a> <p>Why not </p> <a href="_">Link 3</a> <p>Why yes </p> <a href="_">Link 4</a> <p>Ye...no?</p> <a href="_">Link 5</a> <p>YES!</p> <hr noshade="1"> </body> </html> Thank you~ 1st time post and an amatuer with no formal teaching of html. I have placed an image on my web page and i want the text i enter to center itself next to the image. I have used align="Center" or Align="middle" and it does that perfectly for the 1st line of text. The issue is when the text spills over to the next line it goes under the image. I have tried a <br /> after the last word of the lines and that did nothing. How can I get all the lines to be centered? Centered meaning from top to bottom not side to side. Thanks, Cardgunner Hi guys, I'm really having a problem here. I'm creating a new instant messenger program and can't get the tables to stretch properly. Firstoff, when the messenger loads, you will not see the address bar, status bar, menu bar, etc. I want to be able to resize the browser (messenger) window to any size, just like you would with msn for example. I have 3 tables. 1) The first one will contain all the header graphics etc and I want this table to stay aligned to the TOP of the browser window. 2) The middle table is where the chat conversation text will go. The chat text will be aligned to the top of this window. This is the window that I need to stretch to vertically automatically when you resize the browser window. 3) The last table is where the message entry box will be. I want this to stay aligned to the BOTTOM of the browser window. Right now, my MAIN TABLE which contains all of the messenger content does stretch to fit the screen, but how the heck do I get the three tables inside it to be aligned how i need them??? Here is the basic code that I'm working with: <html> <head> <title>Site Title</title> <link rel="stylesheet" href="style.css" type="text/css"> </head> <body> <table id="fullheight" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td> <table border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse" bordercolor="#111111" width="100%"> <tr> <td width="100%">Header goes here - Stays aligned to the top of the browser window</td> </tr> <tr> <td width="100%">Middle chat content - automatically stretches vertically when the browser window is resized</td> </tr> <tr> <td width="100%">Message entry box section - stays aligned to the bottom of the browser window</td> </tr> </table> </td> </tr> </table> </body> </html> This is the CSS code that I'm using which makes the MAIN table expand to fit the entire browser window: html, body { margin:0; padding:0; height:100%; border:none } #fullheight{height:100%} Can anyone please help me out? Thanks! Hey guys! On the site I'm working on, I have made overflow:hidden, scrollbars:none, and body scroll=no. It works fine. But when I press and hold the scroll wheel on my mouse to scroll left and right (Middle Click Scrolling), it actually scrolls. How do I disable middle click scrolling? This is my first post here so I apologize if I've done something wrong. Thank you! EDIT: It also scrolls when I use the arrow keys! Help Help, Can anyone tell me why my website is splitting down the middle. In other words when I scroll down it looks like the left half and right half don't match. It happens on all computers. And, how do I fix it? The url is www.gotobreakingthrough.com Thanks Can someone please tell me how to center an iframe vertically on a page. I am feeling really stupid right now that I can't get it. I've tried a few different things and it's not budging!!!! Please help - thanks! I'm getting strange characters right in the middle of a word. The character looks like a rectangle with an X in it in my browser Safari. At a PC at a university the character was different, dots, I think. Here is the code for the relavent line: <LI><U> La Primavera: Music for voice, lute, viola da gamba and recorder from the English Renaissance</U> You can listen to the whole CD at Magnatune Records and it is also available <A HREF="luteCD.html#Total running time: 59:22"> <strong> here </strong></A>). Played lute as well as produced and arranged music from the late Renaissance featuring lute songs and instrumentals <BR> <align = 'right'> <a href = "mainpage.htm#Why">Back to Home Page</a> </right> Strange. The characters appear in the preview window for this message but not the window I'm typing in now. If you see the characters, there is no need to visit my page, but here is the link to the page. The troublesome line is at the bottom. http://www9.plala.or.jp/edurbrow/personalhistory.html TIA I know "<br>" causes a line break outside of a string, but how can I insert one INSIDE a string? Ex: <textarea value="" > example text <LINE BREAK> more example text </textarea> First off I want to say that I'm new to this forum. Thanks in advance for the help you can give to a noobie. Here's the "dummy page" I put up: http://www.mrcrepe.com/work.html The table I made in dreamweaver. I put it as 900px wide with 1 row and 2 columns. The border color I made a redish/pinkish color as you can see on the outsides, but how do I make that "separater border" into the same color? Right now it's just that silver line. Thanks in advance. -Brian |
|||||||