HTML - Implement Video Background To Website
i am currently using wordpad and making a website on rappers i am trying to add a video which will be a FULL-SCREEN video for the background but i dont have a clue what to do
i have this at the moment to stream the video <img border="0" dynsrc="John Cena 6th Titantron.wmv" start="fileopen"> please help Similar TutorialsHi, I'm trying to figure out what would be the best way to place adverts and menus onto my website. I plan on making this site 50+ pages...and as content varies from page to page....what is the best way to implement ads and menus so they are the same throughout the whole site? Hi everyone, I'm new to this forum so please correct me if I'm doing anything wrong or if this post is in the wrong section. I have a custom template for my website which allows you to scroll down and view my photographs. I would like to keep it this way BUT I would like to implement Google Ads on either sides of my centered content. I want these ads to be stationary even if a viewer is scrolling to the bottom of my site. Is this possible, and even then, is it hard to do? I really appreciate your help. Here is the link to my website if that helps. http://floatingcity.tumblr.com Cheers, Kyle Please help! I hired someone to update our website and they royally screwed me. We didn't like what they did with video and despite promising to archive/save the old code when they updated - it is all gone. GoDaddy wants $1500 to revert the website back. I got almost all of it figured out but I have no experience and I am stuck on one final piece. We have a video player on the website and a list of videos to click and play. That is working. We want a static image showing in the video player that will play when clicked. I have the image. I have the video. But nothing I have tried works. Can anyone please help? HTML Code: <%@ Control Language="C#" AutoEventWireup="true" CodeFile="bannerControl.ascx.cs" Inherits="bannerControl" %> <script> </script> <div class="banner"> <object id="FlashID3" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="548" height="192"> <param name="movie" value="flash banner15.swf" /> <param name="quality" value="high" /> <param name="swfversion" value="8.0.35.0" /> <!-- This param tag prompts users with Flash Player 6.0 r65 and higher to download the latest version of Flash Player. Delete it if you don�t want users to see the prompt. --> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- Next object tag is for non-IE browsers. So hide it from IE using IECC. --> <!--[if !IE]>--> <object type="application/x-shockwave-flash" data="flash banner15.swf" width="548" height="192"> <!--<![endif]--> <param name="quality" value="high" /> <param name="swfversion" value="8.0.35.0" /> <param name="expressinstall" value="Scripts/expressInstall.swf" /> <!-- The browser displays the following alternative content for users with Flash Player 6.0 and older. --> <div> <h4>Content on this page requires a newer version of Adobe Flash Player.</h4> <p><a href="http://www.adobe.com/go/getflashplayer"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" width="112" height="33" /></a></p> </div> <!--[if !IE]>--> </object> <!--<![endif]--> </object> </div> <div class="videoSection"> <div class="videoPlayer" id="videoPlayer"> <iframe src= default.htm" width="316" height="177" autoStart="false" high allowtransparency="true" frameborder="0" scrolling="no"></iframe> </div> <div class="videoList"> <div class="topBtn"><img src="images/btn_top.jpg" id="next" /></div> <div class="videos" id="video"> <div class="scrollArea"> <ul> <%-- <li><a href="video/video1.html">When Selling...</a></li>--%> <li ><a href="video/video2.html">VERCOR<br>Services<br></a> </li> <%-- <li> <a href="video/video4.html">Why<br> VERCOR?</a></li> --%> <li><a href="video/video3.html">Why Hire a<br>M&A Firm</a> </li> <li><a href="video/video7.html" >Types of<br>Firms</a> </li> </ul> </div> <div class="scrollArea" > <ul> <li><a href="video/video4.html">Common<br>Pitfalls</a> </li> <li><a href="video/video5.html" >The VERCOR<br>Process</a> </li> <li><a href="video/video7.html" >Types of<br>Firms</a> </li> </ul> </div> <div class="scrollArea"> <ul> <li ><a href="video/video8.html" >When a Done<br>Deal Is Not<br> Really Done</a> </li> <li><a href="video/video5.html" >The VERCOR<br> Process</a> </li> <li><a href="video/video7.html" >Types of<br>Firms</a> </li> </ul> </div> </div> <div class="bottomBtn"> <img src="images/btn_bottom.jpg" id="prev" /> </div> </div> </div> Hello, I hope I'm posting in the correct forum. I work for a "No Kill" animal shelter. Once a month, we take animals to our local NBC station for adoptions. We used to be able to snag the video from their website to ours using Realplayer. They have had their website redesigned and we're no longer able to snag anymore video. I looked at their source code and all the pages say <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">earance. The files used to be .flv but are now mp4. Is there anyway to see the rest of their source code? The station outsourced their website and no longer maintain it themselves, but are fine with us adding our appearances on their website to ours. Their site is: www.kmir6.com Ours is: www.saveapetonline.org Many thanks, Rockinrick Hi guys, I am trying to embed a .mov video that is hosted on my amazon s3 account to a website. I use this code: <embed src="http://dale-beaumont.s3.amazonaws.com/Training%20Videos/Wordpress/mov/domain-name.mov" Pluginspage="http://www.apple.com/quicktime/" width="600" height="400" CONTROLLER="true" LOOP="false" AUTOPLAY="false" name="DomainName"></embed> As you can see I have written CONTROLLER="true" however it does not display the controller. You can see the video he http://www.alaisterlow.com/test-video/ Any help would be great. Thanks What's Up? OK, So im using. Code: <object width="331" height="159"> <param name="movie" value="background.flv"> <embed src="background.flv" width="800" height="600"> </embed> </object> to display a flv video on my webpage, but i also want to display a image and two textboxes over the top of that video. Is it possible? if so how? Thanks Bye. i want to put a youtube video as my background that automaticaly plays when the webpage appears that can have text in front of it Im a beginner so please if anyone knows let me know. Im actually learning for free on w3schools.com and e-learningcenter.com but now, Im willing to buy me a complete course even though I know I can learn for free. Thank you so much! Hi there, I know nothing formal about HTML, hence the code below being converted from an Open Office file. Hopefully it is readable - it is some declarations, a body with maybe 10 links in it, and then an embedded video code from Exposure Room. I have the alignment how I want it, but the background-black in the body doesn't work any more. Is anyone able to show me how to keep the center alignments I have but also switch the background of the whole page to black? It works if I take out the <center> tags but then everything is left aligned, which I don't like. Any help would be appreciated, cheers, Tony Code: <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1 plus MathML 2.0//EN" "http://www.w3.org/TR/MathML2/dtd/xhtml-math11-f.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"><!--This file was converted to xhtml by OpenOffice.org - see http://xml.openoffice.org/odf2xhtml for more info.--><head profile="http://dublincore.org/documents/dcmi-terms/"><meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8"/><title xml:lang="en-US">- no title specified</title><meta name="DCTERMS.title" content="" xml:lang="en-US"/><meta name="DCTERMS.language" content="en-US" scheme="DCTERMS.RFC4646"/><meta name="DCTERMS.source" content="http://xml.openoffice.org/odf2xhtml"/><meta name="DCTERMS.creator" content="Tony Wilkes"/><meta name="DCTERMS.issued" content="2011-04-17T19:59:38.83" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.contributor" content="Tony Wilkes"/><meta name="DCTERMS.modified" content="2011-04-17T20:31:54.51" scheme="DCTERMS.W3CDTF"/><meta name="DCTERMS.provenance" content="" xml:lang="en-US"/><meta name="DCTERMS.subject" content="," xml:lang="en-US"/><link rel="schema.DC" href="http://purl.org/dc/elements/1.1/" hreflang="en"/><link rel="schema.DCTERMS" href="http://purl.org/dc/terms/" hreflang="en"/><link rel="schema.DCTYPE" href="http://purl.org/dc/dcmitype/" hreflang="en"/><link rel="schema.DCAM" href="http://purl.org/dc/dcam/" hreflang="en"/><base href="."/><style type="text/css"> @page { } table { border-collapse:collapse; border-spacing:0; empty-cells:show } td, th { vertical-align:top; font-size:12pt;} h1, h2, h3, h4, h5, h6 { clear:both } ol, ul { margin:0; padding:0;} li { list-style: none; margin:0; padding:0;} <!-- "li span.odfLiEnd" - IE 7 issue--> li span. { clear: both; line-height:0; width:0; height:0; margin:0; padding:0; } span.footnodeNumber { padding-right:1em; } span.annotation_style_by_filter { font-size:95%; font-family:Arial; background-color:#fff000; margin:0; border:0; padding:0; } * { margin:0;} .P1 { font-size:12pt; font-family:Trebuchet MS; writing-mode:page; text-align:center ! important; color:#b3b3b3; } .T2 { font-size:10pt; } <!-- ODF styles with no properties representable as CSS --> { } </style></head><center><body dir="ltr" style="max-width:21.001cm;margin-top:2cm; margin-bottom:2cm; margin-left:2cm; margin-right:2cm; background-color:#000000; "><p class="P1">Lying Down</p><p class="P1">*</p><p class="P1"><a href="http://www.lyingdown.co.uk/index.xhtml">Trailer</a> * <a href="http://www.lyingdown.co.uk/part1med">Part 1</a> * <a href="http://www.lyingdown.co.uk/part2med">Part 2</a> * <a href="http://www.lyingdown.co.uk/part3med">Part 3</a> * <a href="http://www.lyingdown.co.uk/part4med">Part 4</a> * <a href="http://www.lyingdown.co.uk/part5med">Part 5</a> * <a href="http://www.lyingdown.co.uk/part6med">Part 6</a> * <a href="http://www.lyingdown.co.uk/part7med">Part 7</a> * Download</p><p class="P1"><span class="T2"/></p><p class="P1"><a href="http://www.lyingdown.co.uk/indexlow"><span class="T2">Lowest quality</span></a><span class="T2"> * </span><a href="http://www.lyingdown.co.uk/indexhigh"><span class="T2">Highest Quality</span></a></p><p class="P1"><span class="T2"/></p><p class="P1">*</p> <object id="xrPf8470a83ede543789fc18d1556be86e9" width="640" height="360" type="application/x-shockwave-flash" data="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff"><param name="movie" value="http://exposureroom.com/flash/XRVideoPlayer2.swf?domain=exposureroom.com/&assetId=f8470a83ede543789fc18d1556be86e9&size=md&titleColor=%23ffffff" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="allowFullScreen" value="True" /><param name="wmode" value="opaque" /></object><div><div class="viewOnXRDiv"><a href="http://exposureroom.com/f8470a83ede543789fc18d1556be86e9" class="viewOnXRLink" title="Lying Down trailer by Tony Wilkes - View it on ExposureRoom" target="_blank">View on ExposureRoom</a></div></div> </body></center> </html> I am currently designing a website and I have to allow the user to change the background to a colour of his/her liking. I have a javascript function which works fine, but the problem is when you navigate to a different page the background colour will change to the default colour. I need to somehow allow the user to change the background colour for the entire website from any given web page. Below is the function i am using. Thank you in advance for your assistance. <script type="text/javascript"> function bg_color(c){ var b = document.getElementsByTagName("div")[0]; var d = document.getElementsByTagName("body")[0]; b.style.background = c; d.style.background = c; } </script> I have the following question: I have a website with a background image and on that background image I have some text. When I scroll down I want my background to stay where it is and only the text should scroll down. What should I do to make this like that? Hi, I'm wondering if there is a way to ensure that my website background will work with any resolution i.e. will the flowers stay flush with the bottom corner of the page? http://imageshack.us/photo/my-images/819/bg1ev.jpg/ Hello everyone! I am so grateful that there are sites like this to help those like me. I'm ready to be hit by rotten tomatoes because my method for building my first site probably breaks tons of rules. I used Photoshop to create a webpage by slicing a single image with the intention of laying it out in a table. When I first sliced the image and simply set each image using "img src=" in each Table Data cell, it came together fine and looked perfect. The problem happened when I made one of my images the background image for the cell. The reason I did this is because this is going to be my main "Content" area and I want to be able to enter content over the image. For some reason, right when I made this change, the cell directly to the left of my "main content cell" is pushing to the right and creating unwanted blank space...and I can't for the life of me figure out why. I'm pulling my hair out and I'll probably cry myself to sleep tonight. I thought it was my HTML and found a tiny bit of CSS to help, but the problem remains. Thanks so much in advance for any assistance you can provide. The site is here (I added red borders to the table for assistance with review): http://www.geocities.com/mena_beena/Rosco.html Here is my HTML: Code: <html> <head> <link rel="stylesheet" type="text/css" href="rosco.css" /> </head> <body bgcolor=black> <table bordercolor=red border=1 cellspacing="1" cellpadding="0"> <tr> <td colspan=3><img src="Template4_01.jpg"></td> </tr> <tr> <td colspan=2><img src="Template4_02.jpg"></td> <td><img src="Template4_03.jpg"><br><img src="Template4_04.jpg"></td> </tr> <tr> <td><img src="Template4_05.jpg"></td> <td class="bg">asdfasdf</td> <td><img src="Template4_07.jpg"><br><img src="Template4_08.jpg"><br> <img src="Template4_09.jpg"><br><img src="Template4_10.jpg"></td> </tr> </table> </body> </html> Here is my CSS Stylesheet: Code: td.bg{ background: url(Template4_06.jpg); } Hi, I have an image "m1" set as the background of a table on my website. The table is set to the width of the image "340". However, when I add text it pushes the border and the image repeats/cuts off. http://www.monkeygambling.com/newpage.htm This problem only happens in IE, not in opera. Can anyone help? thanks Hi guys, I'm currently trying to sort out the background for a website. What I'd like is to have a silhouette of a few people on a gradient background. I'd like to keep the quality high, but it also makes the file size large. If there were no silhouette then I would have a one pixel strip of the gradient set to repeat. Is it possible to add two background pictures, or is there another way I can reduce the file size that I hadn't thought of? Hello everyone I have run into a roadblock. I am trying to make a background image scale properly with Internet Explorer. I have successfully made the image fit the web browser right, using this code in a CSS class. The code I am using is as written: PHP Code: body.background { filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale'); -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../Images/Website Background-3.jpg', sizingMethod='scale')"; } this code makes the background I am using work correctly in Internet Explorer. However, when I use this code, it makes the rest of the website stop working. I can no longer click on any of the links on the page, or anything of the sort. However, all my styles for the links still remain on the page. Any suggestions? Thank you all, Mitch Guzman I've got another problem with my website. I've taken a screenshot that I wanted for my website background. But since it was took on my screen, it doesn't fill the screen on wider monitors. I'm just wondering if there's any information on auto-resizing a website background. Or is it a scirpt/CSS/php style thing? This problem seems abit more complex than me previous problem. I'm on a 19 inch monitor. Here is my website for those that have bigger screens than me. http://www.dawncraftmc.com/ 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 On this page: http://www.hindbrain.net/ex10.php I am experimenting with a 'button' to click on to to to a link. I think that it is working pretty well, but I wanted to see if there is a better way to do it. It seems to sometimes act a little odd when the images first load in the browser. Is there a way to cause them to pre load? edit: I found a way to add a preload css class, so maybe that works. html: <a href="http://www.mozilla.com/firefox/" class="userbutton"></a> css: .userbutton { position: absolute; right: 50px; top: 50px; z-index: 2; background-color: transparent; background-image: url(grey2.png); background-repeat: no-repeat; border: 0px solid; width: 70px; height: 70px; } a.userbutton:visited { background-image: url(green2.png); } a.userbutton:hover { background-image: url(blue2.png); } thanks, William 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(); ?> |