HTML - Loaded Youtube Video Into Iframe Distorts When Scrolled
Hello,
I am loading a webpage with an embedded youtube video (and paragraphs of text data) into an iframe window. This works fine, but when I scroll the iframe window (up/down), the youtube video doesn't scroll with it. It distorts. To be clear, I have two browsers, Mozilla Firebird, and IE6, and in Firebird it works fine, IE6 is where I have the trouble. Here is the code. Here is the css part of the loaded page: Code: <STYLE TYPE="text/css"> <!-- #video { position: absolute; margin-top: 200px; margin-left: 20px; } --> </STYLE> here is the embedded video of the loaded page Code: <div id="video"> <object width="425" height="350"> <param name="movie" value="http://www.youtube.com/v/Yi-wNLT3HjA"> </param> <embed src="http://www.youtube.com/v/Yi-wNLT3HjA" type="application/x-shockwave-flash" width="425" height="350"> </embed> </object> </div> Okay, now here is the iframe code, the window into which the video is loaded The css part Code: <STYLE TYPE="text/css"> <!-- #datawindow { position: absolute; filter:alpha(opacity=80); width: 210px; height: 600px; margin: 0; margin-top: 180px; margin-left: 180px; font-weight: normal; } --> </STYLE> The code in the body: Code: <div id="datawindow"> <iframe name="stuff" id="framewindow" src="home.html" frameborder="0" scrolling="auto" width=500 height=510 marginwidth=5 marginheight=5 scrolling="auto"></iframe> </div> Does anyone have any idea what I'm doing wrong, why the video isn't properly scrolling in the iframe window? Thanks for any feedback! Similar Tutorialshello, i want to put a youtube video on my site,for example <object width="425" height="355"><param name="movie" value="http://www.youtube.com/v/QmIDEGtFfhU&rel=1"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/QmIDEGtFfhU&rel=1" type="application/x-shockwave-flash" wmode="transparent" width="425" height="355"></embed></object> as you can see the size is "425 with 355".but i dont want that size,its too big for my site. so i tryed to modify it, putting width="220" and height="200" in both object and embed. i tested my page,the movie window is indeed smaller but the video image IS NOT.you know that there is youtube logo on each clip when you put it on a website,and on my page that logo is seen on half. can i make it to show full image? (i hope you understand the problem) thank you. Sorry do not know which forum to post this. I would like to post videos on my site but behind my user authentication. It would be nice to use the YouTube service since it optimizes automatically but I do not want the videos public. I already have some public ones on my YouTube channel. Is there an alternative method I can post videos on my authenticated pages that cannot be access with a direct link? Hello, IE8 can't read my Youtube video here : http://www.imi-solutions.com/?page_id=1631 Thank you for your help ! hi, i have a twelve videos and want upload on my website...! i want to create a youtube video gallery like in which video play on left hand side and other video thumbnail on right hand side with paging...! and all the pages have this gallery...! i dont know whatz the method or tool to create video gallery...! if u have any idea and tool or any suggestion kindly inform me...! last thing is that i dont want to use any database...! is it possible? How do I post a youtube video at a 30deg angle? saw some web pages where the video inside came from youtube The whole page was from their own site but the window that showed the video was from youtube. almost like a window into youtube for just that 1 part of the page can this be done with just html? area maps? I really need to do this. My host server gives problems when I embed a video, It would be great just to use youtube please help -marksmolen@mail.com Hi everyone! I'm new here! And i got a real weird problem! Like you can see on my image, i use a Spry Horizontal Menu and a Youtube Video. And when i use Firefox the Menu is over the video (Ok) But when i use other kind of browsers the video is over the menu, only able to see the 3 sub menus! I'm using javascript in the Spry Horizontal Menu and the iframe embed code in the youtube video. As already happened this to anyone! Someone know how to solve it? What code do you need to see? Please help Website URL - http://www.cae.eu5.org I would like to link an youtube video on one of my blog post using the embedded code that youtube provided. So I added in my post html view this code: <iframe width="640" height="360" src="http://www.youtube.com/embed/mIhqjRWZ77Y" frameborder="0" allowfullscreen></iframe> Before to publish the post I tested it, with the wordpress preview option. Some browser not works well.This is the scenario: 1) Using the last version of the Internet Explorer browser the post with the video works fine. 2) Using the last version of the Google Chrome browser I have to reload the html page two times before to view exactly the embedded video. After that the page works fine but when I load for the first time the page I don't see the video. 3) Using the last version of the Safari and the Firefox browser I have to reload two times the html page before to view the embedded video and after I have a problem viewing the video. The message is that the format video is not supported. Could you please help me to solve the problem. Which is the correct way to use the embedded code starting from youtube website ? How can I debug the issue ? Thanks a lot. Hello all! I need some help to make a link on my webpage which can open a Youtube-video in a new empty window. Youtube.com offers to types of linking the video-code: a) a regular URL-link for opening the video in a regular youtube-page (with all menus and ads) Example: http://www.youtube.com/watch?v=_i_VvpQbYj4 b) an embed-code which will show the video anywhere you want on your webpage. Example: <object width="425" height="350"><param name="movie" value="http://www.youtube.com/v/_i_VvpQbYj4"></param><param name="wmode" value="transparent"></param><embed src="http://www.youtube.com/v/_i_VvpQbYj4" type="application/x-shockwave-flash" wmode="transparent" width="425" height="350"></embed></object> So I guess we have to combine these two methods for solving the problem? Perhaps I can make an empty html-page called "\videopage.html", and then make a link-code which opens the videopage.html showing the video embedded? Like this: 1. Make a file called "\videopage.html" 2. Make a link on my webpage with the unknown code. 3. When a user clicking on my video-link, it opens the page called "\videopage.html" and plays the video. 4. I have many videos linking from youtube, so I think I have to re-use the page called "\videopage.html" many times. 5. This means the "\videopage.html" needs to be empty all the time, and just be 'called on' by the code. Can anyone help me? I hope a clever HTML-coder can make this work... Anyone with ideas? Best regards, Stereoid Hello, I have a client were working with. He uses myspace. He wants a youtube video to autoplay from youtube. He wants it to look sleek and doesn't want the controls buttons to show. I've read this is possible but can't get the div code right. It's an HD video and it's height="480" width="720". We came across this url: http://www.createblog.com/myspace-sc...eo-top_bottom/ and We found this code as an example it says: Where it says YOUTUBE URL HERE insert your youtube embed url, not the url of the YouTube page. Change the first 380 and the 230 to change the video's size and the -90 to position the video. **** <div style="width:380px; height:230px; overflow:hidden!important; text-align:center;"><br /> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height="410" width="380" style="position:relative; top: -90 px;" data=" YOUTUBE URL HERE "> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value="YOUTUBE URL HERE" /> <param name="wmode" value="transparent" /> </object> </div> **** This is our code were tried but it is not working? can you please help us. Thank you in advanced. Our code we tried: **** <div style="width: 720 px; height: 480 px; overflow:hidden!important; text-align:center;"><br /> <object type="application/x-shockwave-flash" allowScriptAccess="never" allowNetworking="internal" height=" 410 " width=" 380 " style="position:relative; top: -90 px;" data=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 "> <param name="allowScriptAccess" value="never" /> <param name="allowNetworking" value="internal" /> <param name="movie" value=" http://www.youtube.com/v/vaKuFww3ljM&ap=%2526fmt%3D18&loop=1&controls=0&showinfo=0&autoplay=1&&iv_load_policy=3 " /> <param name="wmode" value="transparent" /> </object> </div> **** Hello, Can anybody post a code that will let me embeed remote .FLV video into web page by using IFRAME? Thanks I am not the most technically inclined, so the wording may be iffy ... but I noticed that when I use a table to align images (like jpegs or gifs), my webpages get skewed only when I view them in Windows internet explorer 8 (things seem to be okay in Mozilla, Safari, Chrome, etc etc) ... anyone know why? here is an example: I put an image with a width="32" and a height="29" into a 'TD' tag (data for table) that is also designated a dimension of 32 by 29 pixels ... for some reason in explorer the images skew the table and distort my webpage. note: I set in the table tag: cellpadding = 0 cellspacing =0 border=0 ALSO i set inside the img src tag a 'border=0' to be safe look at the following example (in explorer 8 then the other browsers that seem to work): http://missko.shacknet.nu/cityofrose...bleexample.htm .. in the first (very small) image to the left you can see a green background color just below the image (only in Windows internet explorer 8) meaning it did not fit within the 'table data' boundaries for that particular table. i hope this makes ANY sense .. this is driving me CRAZY! it is happening with ALL my stuff .. i have a feeling there is no way around this. any ideas? thanks. Is it possible to start a page scrolled down a certain amount automatically? Not through a link, just so that whenever someone visits the site, it is scrolled down that default amount? Thanks! Hi, i'm doing an interface for a database, and i want to print my query results on tables. As i have many entries, i need a big table so i want to do a table with scroll where my header doesn't get out of sight (ever) when i scroll down. im working on NuSphere Phped, Windows 7. This code is working only on the PHPed simulator...on chrome and FF the scrollbar dont appear: PHP Code: <table align="center" cellpadding="3" cellspacing="0" style="border: black; border-style:double ; border-spacing: 0; cursor:default;"> <thead> <?php ###### ###### processing the query for($i=0; $i<$numcol; $i++) { ####### echo "<th bgcolor=\"#000000\" "; ####### some conditions for mouse events echo "><font face=\"helvetica, cursive\" size=\"-2\" color=\"white\">"; echo $column_name"</font></th>"; } ?> <th style="width: 16px; background: black;"></th> ##16px for the scrollbar </thead> <tbody style="overflow-y: scroll;overflow-x:hidden; height: 300;"> <?php $i=0; do{ ######## ######## ?> <tr onmouseover="this.bgColor='#B3BC7A'" onMouseout="this.bgColor='<?php if($i%2==0) echo "#eeeeee"; else echo "#ffffff"; ?>'" <?php if($i%2==0) echo " bgcolor=\"#eeeeee\" "; else echo " bgcolor=\"#ffffff\""; ?>> <?php for($j=0; $j<$numcol; $j++) { ?> <td <?php #######more php query precessing ########## ?> ><font face="helvetica, cursive" size="-2"> <?php } echo $attribute; ?> </td> <?php } ?> </font> <td style="width: 16px; overflow: scroll;"></td></tr> <?php $i++; }while($currentRow) ?> </tbody> </table> can someone tell me how to make it work on those browsers? 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(); ?> first of all, i'm sorry if this is a repost, basically i've uploaded an audio player to a site, www.habit-music.co.uk, ( i know this is a scruffy code btw.) The player works fine in firefox, chrome, etc, but in ie it shows as a white box, how can i fix this? also my spry nav bar does the same. On a side note if anyone knows of a better audio player could you tell me please? thanks, olly Hey all! I'm just starting to work on a site and already it's giving me a hard time. It's not much at the moment, but here's where I'm at http://comgardens.com/wandl/index.html If you hit the refresh button a couple of times you'll see that the content jumps, at least in Firefox, and I can't figure out why. Anyone have any ideas? Thanks!! I am working on a blog site with embeded videos and I keep getting the error icon at the bottom right. It always shows up on any video posts. Anybody got any pointers or want to review the code? I created it with wordpress. The main page loads with errors only if a video post is there. if its only regular posts such as picture posts, there are no errors, and the individual video posts have the same error. Any help or ideas would be greatly appreciated. Before you click the link, it does contain adult material. ** link removed ** edit: this is my first site using wordpress and I have very little experience with html, only self taught . Hi Everyone, i have a peculiar problem with IE6. The header on of the site I am working on right now (http://www.mobilitynow.de) is a DIV Container in which I am loading several PNG images (without transparency). They have a Java script rollover effect. In IE6 (not in any Firefox, Opera or higher Version of IE) the BG where the images are to be placed is shown red while the loading of the images is in progress. Anyone has an idea what the problem might be. Suggestions would be really appreciated. Thanks a lot, Jonathan |