Refreshing of embed object (youtube)

  • Dawid_M
  • Born
  • Born
  • Dawid_M
  • Posts: 4

Post 3+ Months Ago

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
  • Posts: ?
  • Loc: Ozzuland
  • Status: Online

Post 3+ Months Ago

  • wphilipw
  • Student
  • Student
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

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
  • Dawid_M
  • Posts: 4

Post 3+ Months Ago

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
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

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
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

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) {
  26.  var xmlhttp = false;
  27.  try {
  28.   xmlhttp = new ActiveXObject("Msxml2.XMLHTTP");
  29.   } catch (e) {
  30.    try {
  31.     xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
  32.    } catch (E) {
  33.     xmlhttp = false;
  34.    }
  35.   }
  36.  if (!xmlhttp && typeof XMLHttpRequest!='undefined') {
  37.   xmlhttp = new XMLHttpRequest();
  38.  }
  39.  xmlhttp.open("GET", xUrl,true);
  40.  xmlhttp.onreadystatechange=function() {
  41.      if (xmlhttp.readyState==4) {
  42.         document.getElementById(sendID).innerHTML = xmlhttp.responseText;
  43.      }
  44.  }
  45.  xmlhttp.send(null)
  46. }
  47. makeGETrequest("top_html.html", "top");
  48. makeGETrequest("left_html.html", "left");
  49. makeGETrequest("right_html.html", "right");
  50. makeGETrequest("btm_html.html", "btm");
  51. </script>
  52. </head>
  53. <body>
  54. <div id="top"></div>
  55. <div id="left"></div>
  56. <div id="youtube"><YOUTUBE CODE HERE></div>
  57. <div id="right"></div>
  58. <div id="btm"></div>
  59. <div id="dummy"></div>
  60. </body>
  61. </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
  • Dawid_M
  • Posts: 4

Post 3+ Months Ago

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
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

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
  • Dawid_M
  • Posts: 4

Post 3+ Months Ago

: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
  • wphilipw
  • Posts: 87
  • Loc: PA, US

Post 3+ Months Ago

anyday, glad I could help :-)

Post Information

  • Total Posts in this topic: 9 posts
  • Users browsing this forum: No registered users and 84 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
 
cron
 

© 1998-2014. Ozzu® is a registered trademark of Unmelted, LLC.