• Embedding YouTube on a Website: Smooth Transition into video?
    33 replies, posted
  • Hey y'all, I am working on developing a website. I've got Wordpress & a CMS. I'm new to Website design so if you'd bare with me. The site: [url]http://hatchetmedia.net/[/url] The issue: When transitioning from the green category's on the left side of my page (from Awards > Internships > Gear) the transitions are very smooth. However, when using a YouTube Embed link under "Featured" the change between the categories is sudden and not smooth at all. [img]http://img692.imageshack.us/img692/1669/64533268.jpg[/img] The embed for the YouTube video: [quote]<iframe width="500" height="281" src="http://www.youtube.com/embed/w_NbroHP0fg" frameborder="0" allowfullscreen></iframe> <div class="contentrotator-item"> </div>[/quote] I've read that iFrame has some issues with WordPress, that being said -- is there any way to make the transition smooth? Thanks web guys & gals!
  • Are you using IE 10? In that case, IE 10 is still in development, and that might be a bug u want to report inn ;) If not.. well, I'm using Chrome 16 and everything is smooth.
  • [QUOTE=xmariusx;34545651]Are you using IE 10? In that case, IE 10 is still in development, and that might be a bug u want to report inn ;) If not.. well, I'm using Chrome 16 and everything is smooth.[/QUOTE] Chrome 16.0.912.77 m here and the transition is as abrupt as the OP described it.
  • I'm using Chrome, 16.0.912.77 as well. Also I have Firefox and IE9. Both of which display the same abruptness.
  • Of course they do, I don't think that whatever he is using is able to fade in the iframe, I don't know if it even is possible in general. If not, it might still be possible to fade in a flash element, which you could achieve using the old embedding option.
  • I embedded a Vimeo video which fadded in and out perfectly... granted it doesn't use iframe. Is there no other possible options or ways to get YT to fade correctly?' edit: I also temporarily tried the old YT embed code and that did the same thing.
  • I'm not sure if the youtube player allows it, because I remember it forcing itself in the front of basically anything, btu you could try fading a background-colored square over it.
  • Is there a chance that would create a "flickering" effect? Where you would see the video for a flash frame and then the background would overlap it - which would then "fade out" so that the video could be seen?
  • Have you tried using the non-iframe embed? Try looking at the Youtube Player API and see if embeding like that would work, if not there are other players that will stream a youtube video, you could try one of those like jwplayer
  • I've tried to other alternatives. Youtube's 'old' embed option. [quote]<object width="560" height="315"><param name="movie" value="http://www.youtube.com/v/w_NbroHP0fg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/w_NbroHP0fg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>[/quote] ...which looks and operates exactly like the iFrame embed. And also tried WordPress's "Auto-Embed" option, which simply says "Activate this and simply paste a Youtube URL on its own line in a post and an embed is generated." ...This second attempt didn't flat out work.
  • [QUOTE=Coldkilla;34554301]I've tried to other alternatives. Youtube's 'old' embed option. ...which looks and operates exactly like the iFrame embed. And also tried WordPress's "Auto-Embed" option, which simply says "Activate this and simply paste a Youtube URL on its own line in a post and an embed is generated." ...This second attempt didn't flat out work.[/QUOTE] try adding [code]<param name='wmode' value='transparent'></param>[/code] Right after the opening <object ...> tag.
  • I don't think it's possible to set opacity on objects but you could fade out an element above it to make it look like the video is fading in, that's a bit tricky when you have a gradient background though. [editline]5th February 2012[/editline] I just checked out a vimeo video and it does indeed allow opacity. I can see one thing they do differently which is instead of using the embed tag inside of the object, vimeo calls the video src from some flashvars with no embed tag. So it's actually the embed tag which doesn't allow opacity by the looks of it.
  • Do what Coldkilla and TeraBytes said, those combined should fix it! (It will also fix stuff like flash overlapping positioned content)
  • I added the tag after the <object... tag and it still comes in and out in the same way. See the whole thing here: [quote]<object width="500" height="281"><param name='wmode' value='transparent'><param name="movie" value="http://www.youtube.com/v/w_NbroHP0fg?version=3&amp;hl=en_US&amp;rel=0"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube.com/v/w_NbroHP0fg?version=3&amp;hl=en_US&amp;rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></param></object>[/quote]
  • Do Youtube embeds use some HTML or is it all Flash? If Flash, maybe you could make something in Flash that embeds the movie and fades it.
  • If I'm forced to use third party software to run the videos I'm about to just say screw videos on the main site. Any prospective job seeker bumps into a "flash is required to view this" error, might as well kiss that job possibility good bye.
  • It's a bit complicated, when using the <iframe> method YouTube might either use Flash or the browsers native <video> support. <video> can be animated, transformed, faded, etc. Flash can as well, as long as it's not in windowed mode (which is the default for multiple reasons). The other option is to use a slide instead of a fade, clipping is easy for browsers to do.
  • [QUOTE=Coldkilla;34570682]I added the tag after the <object... tag and it still comes in and out in the same way. See the whole thing here:[/QUOTE] You did not close the param tag right after you opened it. That makes it invalid. If you notice, all other param tags are closed.
  • Here you go: [url]http://www.evolution-gaming.net/blasphp/jquery/JQF2.html[/url] feel free to look at the source to see how I did it.
  • Nice but the video doesn't work in IE. Opera doesn't fade at all and fading in, in Firefox kinda jumps.
  • I just tested in all the browsers you mentioned besides Opera, and it works fine in most of them ( Chrome and Firefox ) It mostly works in IE 32bit.
  • Yeah, ignore the Firefox problem. It just looks like it jumps because it fades to black instead of the preview picture which looks smoother when fading.
  • I went to my University today and used their Macs to access my site - the video fades in perfectly (using both firefox and Safari). However when I come home on my PC it still jumps in and out using Firefox/Chrome. I attempted your suggestion Blasphemy and used the code it provided, modifying the resolution of course: [quote]<object style="height: 281px; width: 500px"><param name="movie" value="http://www.youtube.com/v/w_NbroHP0fg?version=3&feature=player_embedded"><param name="allowFullScreen" value="true"><param name="allowScriptAccess" value="always"><embed src="http://www.youtube.com/v/w_NbroHP0fg?version=3&feature=player_embedded" type="application/x-shockwave-flash" allowfullscreen="true" allowScriptAccess="always" width="500" height="281"></object>[/quote] Same result. The video pops in and out with the text in the background fading correctly.
  • How about this: Make it so an image displays at first (ss of the embedded video for example) and when someone mouseovers it change the innerhtml to the embedded video. It's kind of a crappy workaround but I don't see why it shouldn't work. [code] $(document).ready(function embedworkaround(){ var whatdisplay = '<iframe src="http://www.youtube.com/embed/w_NbroHP0fg" frameborder="0" width="500" height="281"></iframe>'; var whatdisplaynormal = '<img src="imageyouwantdisplayedfirst.png"/>'; $("#embedload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplay; return false; }); $("#embedunload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplaynormal; return false; }); }); [/code] Change your content of the embedded video to: [code] <div id="embedload"> <img src="imageyouwantdisplayedfirst.png"/> </div> [/code] Give the element where the buttons are placed [code]id="embedunload"[/code] I probably did something wrong there... but don't feel like testing it.
  • [QUOTE=Coldkilla;34687427]I went to my University today and used their Macs to access my site - the video fades in perfectly (using both firefox and Safari). However when I come home on my PC it still jumps in and out using Firefox/Chrome. I attempted your suggestion Blasphemy and used the code it provided, modifying the resolution of course: Same result. The video pops in and out with the text in the background fading correctly.[/QUOTE] You may as well leave out the <object> and <param> tags in this, they won't do anything (You haven't told the browser to use Flash, so it doesn't know what to pass the value of "movie" too, it just falls back to the <embed> tag then.)
  • [QUOTE=Miljaker;34758204]How about this: Make it so an image displays at first (ss of the embedded video for example) and when someone mouseovers it change the innerhtml to the embedded video. It's kind of a crappy workaround but I don't see why it shouldn't work. [code] $(document).ready(function embedworkaround(){ var whatdisplay = '<iframe src="http://www.youtube.com/embed/w_NbroHP0fg" frameborder="0" width="500" height="281"></iframe>'; var whatdisplaynormal = '<img src="imageyouwantdisplayedfirst.png"/>'; $("#embedload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplay; return false; }); $("#embedunload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplaynormal; return false; }); }); [/code] Change your content of the embedded video to: [code] <div id="embedload"> <img src="imageyouwantdisplayedfirst.png"/> </div> [/code] Give the element where the buttons are placed [code]id="embedunload"[/code] I probably did something wrong there... but don't feel like testing it.[/QUOTE] Someone visits the site on a mobile browser which means it doesn't support mouseover and the video doesn't work. Never rely on mouseover to provide "critical" functionality.
  • [QUOTE=Miljaker;34758204]How about this: Make it so an image displays at first (ss of the embedded video for example) and when someone mouseovers it change the innerhtml to the embedded video. It's kind of a crappy workaround but I don't see why it shouldn't work. [code] $(document).ready(function embedworkaround(){ var whatdisplay = '<iframe src="http://www.youtube.com/embed/w_NbroHP0fg" frameborder="0" width="500" height="281"></iframe>'; var whatdisplaynormal = '<img src="imageyouwantdisplayedfirst.png"/>'; $("#embedload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplay; return false; }); $("#embedunload").mouseover(function embedworkaround(){ document.getElementById("embedload").innerHTML = whatdisplaynormal; return false; }); }); [/code] Change your content of the embedded video to: [code] <div id="embedload"> <img src="imageyouwantdisplayedfirst.png"/> </div> [/code] Give the element where the buttons are placed [code]id="embedunload"[/code] I probably did something wrong there... but don't feel like testing it.[/QUOTE] That's the weirdest bastardization of jQuery and Javascript I've ever seen.