Back To Website Design Forum

Refreshing of embed object (youtube)

  • Dawid_M
  • Born
  • Born
  • No Avatar
  • Joined: Oct 09, 2007
  • Posts: 4
  • Status: Offline

Post October 9th, 2007, 10:54 pm

Hi! :)

I've got a site writen with php. On the right side there is a menu with youtube movies (<object width="200" height="165"><param name="movie" value=....). Is it possible that while durning browsing when the site is reloaded (i click a link on the left), the movie is still being played?
  • Anonymous
  • Bot
  • No Avatar
  • Joined: 25 Feb 2008
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post October 9th, 2007, 10:54 pm

  • wphilipw
  • Student
  • Student
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 87
  • Loc: PA, US
  • Status: Offline

Post October 9th, 2007, 10:56 pm

if the <embed> tag is inside of an HTML page, and the page is reloaded, so will the <embed> element, but you can mimic this behavior through AJAX (xmlhttprequest) or through frames/iframes, and some simple javascript.

happy coding!
  • Dawid_M
  • Born
  • Born
  • No Avatar
  • Joined: Oct 09, 2007
  • Posts: 4
  • Status: Offline

Post October 9th, 2007, 11:40 pm

Thanks Philip :) I'll try iframes

Now i've got the code like this:

<iframe name="youtube"
src ="youtube.php"
width="100%">
</iframe>

Can I somehow reload the whole site apart from the content of the iframe? I have been looking for some starting point on the internet, but for the time being i don't know how to do that.
  • wphilipw
  • Student
  • Student
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 87
  • Loc: PA, US
  • Status: Offline

Post October 10th, 2007, 12:17 am

well actually to do that you need 2 iframes or frames, and then the 'holder' page here is what I mean:

holder page:
Code: [ Select ]
<html>
<head>
<title>fun with youtube</title>
</head>
<body>
<iframe src="mainpage.html"></iframe>
<iframe src="youtube.html"></iframe>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>fun with youtube</title>
  4. </head>
  5. <body>
  6. <iframe src="mainpage.html"></iframe>
  7. <iframe src="youtube.html"></iframe>
  8. </body>
  9. </html>


and then just put your respective code in the pages mainpage.html and youtube.html

I would actually suggest that the only iframe you actually show to the user is the one which contains the youtube video, and that, via CSS, you hide the other and have it update some kind of scheme of divs or tables on your holder page (using Javascript). the reason I suggest this, is that only using iframes will most likly, and in my experience make for a very ugly user experience.
  • wphilipw
  • Student
  • Student
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 87
  • Loc: PA, US
  • Status: Offline

Post October 10th, 2007, 12:29 am

here is what I would really suggest, take it for what it's worth.

Code: [ Select ]
<html>
<head>
<title>fun with youtube</title>
<style type="text/css">
#top {
 width:100%;
}
#left {
 float: left;
}
#youtube {
 float: left;
}
#right {
 float: left;
}
#btm {
width: 100%;
}
#dummy {
 display: none;
}
</style>
<script type="text/javascript">
function makeGETrequest(xUrl, sendID) {

 var xmlhttp = false;

 try {
  xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  } catch (e) {
   try {
    xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
   } catch (E) {
    xmlhttp = false;
   }
  }

 if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  xmlhttp = new XMLHttpRequest();
 }

 xmlhttp.open("GET", xUrl,true);
 xmlhttp.onreadystatechange=function() {

     if (xmlhttp.readyState==4) {
        document.getElementById(sendID).innerHTML = xmlhttp.responseText;
     }
 }
 xmlhttp.send(null)
}
makeGETrequest("top_html.html", "top");
makeGETrequest("left_html.html", "left");
makeGETrequest("right_html.html", "right");
makeGETrequest("btm_html.html", "btm");
</script>
</head>
<body>
<div id="top"></div>
<div id="left"></div>
<div id="youtube"><YOUTUBE CODE HERE></div>
<div id="right"></div>
<div id="btm"></div>
<div id="dummy"></div>
</body>
</html>
  1. <html>
  2. <head>
  3. <title>fun with youtube</title>
  4. <style type="text/css">
  5. #top {
  6.  width:100%;
  7. }
  8. #left {
  9.  float: left;
  10. }
  11. #youtube {
  12.  float: left;
  13. }
  14. #right {
  15.  float: left;
  16. }
  17. #btm {
  18. width: 100%;
  19. }
  20. #dummy {
  21.  display: none;
  22. }
  23. </style>
  24. <script type="text/javascript">
  25. function makeGETrequest(xUrl, sendID) {
  27.  var xmlhttp = false;
  29.  try {
  30.   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  31.   } catch (e) {
  32.    try {
  33.     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  34.    } catch (E) {
  35.     xmlhttp = false;
  36.    }
  37.   }
  39.  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  40.   xmlhttp = new XMLHttpRequest();
  41.  }
  43.  xmlhttp.open("GET", xUrl,true);
  44.  xmlhttp.onreadystatechange=function() {
  46.      if (xmlhttp.readyState==4) {
  47.         document.getElementById(sendID).innerHTML = xmlhttp.responseText;
  48.      }
  49.  }
  50.  xmlhttp.send(null)
  51. }
  52. makeGETrequest("top_html.html", "top");
  53. makeGETrequest("left_html.html", "left");
  54. makeGETrequest("right_html.html", "right");
  55. makeGETrequest("btm_html.html", "btm");
  56. </script>
  57. </head>
  58. <body>
  59. <div id="top"></div>
  60. <div id="left"></div>
  61. <div id="youtube"><YOUTUBE CODE HERE></div>
  62. <div id="right"></div>
  63. <div id="btm"></div>
  64. <div id="dummy"></div>
  65. </body>
  66. </html>


a couple of things to note here, I included a "dummy" div that is not displayed to the user so that you can get HTML from pages and dump it here until you want to show it somewhere, if you have no use for this, then get rid of it.

I also have 4 divs surrounding the youtube video, one for each side of it, which are updated seperatly as it is now, and will recieve whatever HTML is in top_html.html, left_html.html, right_html.html and btm_html.html respectively.

the CSS code at the top is rudimentary, and can be HUGELY improved on.
the javascript only does xmlhttp requests, thats all I have in there for now.

anyways, this is how I would do it, its prettier and nicer for the user, plus then you can say you use AJAX (since thats the buzzword of the day). this is how I would do what you want, but again, do what works best for you.
  • Dawid_M
  • Born
  • Born
  • No Avatar
  • Joined: Oct 09, 2007
  • Posts: 4
  • Status: Offline

Post October 10th, 2007, 1:52 am

OK, I upgraded my site according to that AJAX thing ;) and it seems to work pretty fine, but i don't know how to make requests\links which load certain site to a specific div (menu).

in other words: what put into <a> tag :)
  • wphilipw
  • Student
  • Student
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 87
  • Loc: PA, US
  • Status: Offline

Post October 10th, 2007, 2:00 am

ok, here is the supper complex a code:

<a href="javascript: makeGETrequest('whatchawant.html', 'top')">This will load file: whatchawant.html into the top div.</a>
  • Dawid_M
  • Born
  • Born
  • No Avatar
  • Joined: Oct 09, 2007
  • Posts: 4
  • Status: Offline

Post October 10th, 2007, 2:09 am

:lol: I'm just a total beginner as far as client-side programming is concerned. Thanks for your help mate. I wouldn't figure that out by myself.

Dzieki ;)
  • wphilipw
  • Student
  • Student
  • No Avatar
  • Joined: Jun 29, 2006
  • Posts: 87
  • Loc: PA, US
  • Status: Offline

Post October 10th, 2007, 2:13 am

anyday, glad I could help :-)

Page 1 of 1

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: roelof and 111 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum
 
 

© 2011 Unmelted, LLC. Ozzu® is a registered trademark of Unmelted, LLC.