HTML - Video Background
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
Similar TutorialsWhat'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 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 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> 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 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(); ?> hello, ive got a video in a mpeg file is there anyway i can transform this into a flash file so its will automatically play at the top of my page in a loop, any ideas would be very helpfull thanks frag When writing in HTML, how whould I add a video to my web page? ok so i posted a music video code on a forum but i want it to aut play when a user views the thread can this be done? the video code is: <center><embed src="http://www.youtube.com/v/JHg2q5M6WnY" type="application/x-shockwave-flash" wmode="transparent" width="600" height="400"></embed></center> Hey guys, I was wondering, that almost 90% of Video on the web is in flash. How will that video be converted into HTML 5. Also, are there any good HTML Video editing tools. Hi, I'm new here. I'm also a beginner web programmer so please take it easy on me. I've taken on a job where I need to embed a video into a webpage, I think I can figure out how to do that however my employer wants this video to be slanted. I have no idea how I would slant the video using HTML/CSS/DHTML. For an example of what I am talking about please view this website: http://www.wavecam.com/ I am aware that the video on that site was embedded into Flash so I'm wondering if that is the only way to do this. Thanks in advance for any help provided. What code would websites like youtube and metacafe let other people upload things? hello all and merry xmas, my client needs a free/very cheap video uploading solution. he has an unlimited hosting account and a domain. he wants to create a website where he uploads daily/weekly sermons (30 - 60 min long videos) and can share it with the web. i was thinking of 1. making video > uploading to his space via ftp > embedding in html form, but i dont think its best to leave so 'many' tasks for him to deal with on a everyday basis. 2. a blog e.g. blogger which will enable him to embed videos, but this means videos arent categorized. 3. free/very cheap video hosting. google video was a favourite but since it has shut down recently he cannot use it. THE EASIEST OPTION are there any other ways of going about this? he is a total beginner to internet and its programming aspects. any help appreciated Okay, this one is a tough one for me. On my website, Celtics Insider, where the picture of the banners are (right above the "About Us" and "Our History" sections), I want to change that image into a video. I want to have a video like ESPN, where it doesn't say "YouTube" or show any of that crap, just a little transparent "play" button (the image, not the text). I'm just wondering a few things. First off, how do I resize the video so it is 442 x 200? Also, how do I make it so the YouTube thing doesn't show up? And how do I make a little transparent play button to click on before the video starts? I want to be able to have text below as well with a link to the story, like ESPN does. If you don't know what I mean, look at ESPN: http://espn.go.com/ Is it possible to use img map and area over an swf file the same way that you can use it on a jpeg? I want to make just specific coordinates on the video to go to specific links. I did it for a jpeg but I can't get it to work on my swf file. could any hero (who must be very advanced) send me example code if you could get it to work -Mark :wacko: :wacko: :excl: marksmolen@mail.com 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> hey I'm working on a video gallery, and here is the basic code: Code: <!-- Start Videos --> <div id="Watch a video"> <img src="WatchAVideo.jpg" alt="Click a video below to watch!" /> </div> <div id="Video1" style="display: none;"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Video1" frameborder="0" allowfullscreen></iframe> </div> <div id="Video 2" style="display: none;"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Video2" frameborder="0" allowfullscreen></iframe> </div> <div id="Video 3" style="display: none;"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Video3" frameborder="0" allowfullscreen></iframe> </div> <div id="Video 4" style="display: none;"> <iframe width="560" height="315" src="http://www.youtube.com/embed/Video4" frameborder="0" allowfullscreen></iframe> </div> <!-- End Videos --> <!-- Start Thumbnails --> <a href="#" clicktoshow="Video 1" clicktohide="Watch a video,Video 2,Video 3,Video 4"> <img src="thumbnail-1.jpg" /> </a> <a href="#" clicktoshow="Video 2" clicktohide="Watch a video,Video 1,Video 3,Video 4"> <img src="thumbnail-2.jpg" /> </a> <a href="#" clicktoshow="Video 3" clicktohide="Watch a video,Video 1,Video 2,Video 4"> <img src="thumbnail-3.jpg" /> </a> <a href="#" clicktoshow="Video 4" clicktohide="Watch a video,Video 1,Video 2,Video 3"> <img src="thumbnail-4.jpg" /> </a> <!-- End Thumbnails --> I am aware that "Clicktoshow" and "Clicktohide" are NOT working HTML codes, But i wanted to know how I can do it so it does work. Any ideas? I was searching on internet and I found a html code which is used when we want change image clicking on image.But I want to have that when image is clicked , image changes to video.For example , I want to have when my image of some car is clicked it changes to video , so I can watch video after seeing an image.If someone knows how to do that please post the html code. I am very new in html and css and now try to learn this one now. As an aged person and as I am in a service so my lots of time is engaged in my office and I want to learn it through video tutorials. Can any one give me some good linked video tutorials to know how to slice one psd , and code them with valid css and use div tags. Any help will be highly appreciated. Regards trnghosh Hi guys, How to i click on a link to make a video go to fullscreen and make the video still play from where is was up to? Thanks for you help This is my first attempt at putting a .avi video on a webpage. Right now, here's my code: <embed src="name.avi"></embed> Internet Explorer will load up a video player, but then the whole page will freeze. The file's 12.9 mb and is being ran on my computer, so it shouldn't be a size issue. To run the video originally, I had to download this codec: http://www.techsmith.com/download/codecs.asp Any ideas? |