1. Post #1
    Coldkilla's Avatar
    February 2005
    50 Posts
    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: http://hatchetmedia.net/

    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.



    The embed for the YouTube video:
    <iframe width="500" height="281" src="http://www.youtube.com/embed/w_NbroHP0fg" frameborder="0" allowfullscreen></iframe>
    <div class="contentrotator-item">
    </div>
    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!

  2. Post #2
    zhed+redball.jpg
    xmariusx's Avatar
    May 2010
    1,447 Posts
    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.

  3. Post #3
    italian
    TerabyteS_'s Avatar
    June 2011
    2,645 Posts
    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.
    Chrome 16.0.912.77 m here and the transition is as abrupt as the OP described it.

  4. Post #4
    Coldkilla's Avatar
    February 2005
    50 Posts
    I'm using Chrome, 16.0.912.77 as well. Also I have Firefox and IE9. Both of which display the same abruptness.

  5. Post #5
    insert long title here
    SEKCobra's Avatar
    January 2009
    15,173 Posts
    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.
    Reply With Quote Edit / Delete Reply Windows 7 Austria Show Events Agree Agree x 2 (list)

  6. Post #6
    Coldkilla's Avatar
    February 2005
    50 Posts
    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.

  7. Post #7
    insert long title here
    SEKCobra's Avatar
    January 2009
    15,173 Posts
    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.
    Reply With Quote Edit / Delete Reply Windows 7 Austria Show Events Agree Agree x 1 (list)

  8. Post #8
    Coldkilla's Avatar
    February 2005
    50 Posts
    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?

  9. Post #9
    zhed+redball.jpg
    xmariusx's Avatar
    May 2010
    1,447 Posts
    Ohh I thought he meant the buttons where not fading. My bad.
    Reply With Quote Edit / Delete Reply Windows 7 Norway Show Events Dumb Dumb x 1 (list)

  10. Post #10
    Gold Member
    Spero78's Avatar
    August 2010
    259 Posts
    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

  11. Post #11
    Coldkilla's Avatar
    February 2005
    50 Posts
    I've tried to other alternatives.

    Youtube's 'old' embed option.
    <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>
    ...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.
    Reply With Quote Edit / Delete Reply Windows 7 Show Events Agree Agree x 1 (list)

  12. Post #12
    italian
    TerabyteS_'s Avatar
    June 2011
    2,645 Posts
    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.
    try adding

    Code:
    <param name='wmode' value='transparent'></param>
    Right after the opening <object ...> tag.
    Reply With Quote Edit / Delete Reply Windows 7 Anonymous Proxy Show Events Agree Agree x 1 (list)

  13. Post #13
    Gold Member
    jaybuz's Avatar
    May 2006
    5,516 Posts
    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.

    Edited:

    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.

  14. Post #14

    December 2008
    557 Posts
    Do what Coldkilla and TeraBytes said, those combined should fix it! (It will also fix stuff like flash overlapping positioned content)

  15. Post #15
    Coldkilla's Avatar
    February 2005
    50 Posts
    I added the tag after the <object... tag and it still comes in and out in the same way. See the whole thing here:

    <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>

  16. Post #16
    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.

  17. Post #17
    Coldkilla's Avatar
    February 2005
    50 Posts
    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.

  18. Post #18
    Gold Member
    TheDecryptor's Avatar
    September 2006
    4,264 Posts
    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.

  19. Post #19
    insert long title here
    SEKCobra's Avatar
    January 2009
    15,173 Posts
    jwplayer works fine with youtube.

  20. Post #20
    italian
    TerabyteS_'s Avatar
    June 2011
    2,645 Posts
    I added the tag after the <object... tag and it still comes in and out in the same way. See the whole thing here:
    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.

  21. Post #21
    Gold Member
    TheDecryptor's Avatar
    September 2006
    4,264 Posts
    <param> tags behave like <img> tags, they don't need a closing tag.

  22. Post #22
    Gold Member
    Blasphemy's Avatar
    December 2009
    407 Posts
    Here you go: http://www.evolution-gaming.net/blas...uery/JQF2.html feel free to look at the source to see how I did it.

  23. Post #23
    Gold Member
    jaybuz's Avatar
    May 2006
    5,516 Posts
    Nice but the video doesn't work in IE. Opera doesn't fade at all and fading in, in Firefox kinda jumps.

  24. Post #24
    Gold Member
    Blasphemy's Avatar
    December 2009
    407 Posts
    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.

  25. Post #25
    Gold Member
    jaybuz's Avatar
    May 2006
    5,516 Posts
    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.

  26. Post #26
    Coldkilla's Avatar
    February 2005
    50 Posts
    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:
    <object style="height: 281px; width: 500px"><param name="movie" value="http://www.youtube.com/v/w_NbroHP0fg?version=3&feature=player_embedded"><pa ram 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>
    Same result. The video pops in and out with the text in the background fading correctly.

  27. Post #27
    I paid $2 for this
    Miljaker's Avatar
    October 2010
    791 Posts
    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;
    	});
    	
    });
    Change your content of the embedded video to:
    Code:
    <div id="embedload">
    <img src="imageyouwantdisplayedfirst.png"/>
    </div>
    Give the element where the buttons are placed
    Code:
    id="embedunload"
    I probably did something wrong there... but don't feel like testing it.

  28. Post #28
    Gold Member
    TheDecryptor's Avatar
    September 2006
    4,264 Posts
    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.
    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.)

  29. Post #29
    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;
    	});
    	
    });
    Change your content of the embedded video to:
    Code:
    <div id="embedload">
    <img src="imageyouwantdisplayedfirst.png"/>
    </div>
    Give the element where the buttons are placed
    Code:
    id="embedunload"
    I probably did something wrong there... but don't feel like testing it.
    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.

  30. Post #30
    secretly a furry
    Jelly's Avatar
    April 2011
    2,023 Posts
    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;
    	});
    	
    });
    Change your content of the embedded video to:
    Code:
    <div id="embedload">
    <img src="imageyouwantdisplayedfirst.png"/>
    </div>
    Give the element where the buttons are placed
    Code:
    id="embedunload"
    I probably did something wrong there... but don't feel like testing it.
    That's the weirdest bastardization of jQuery and Javascript I've ever seen.

  31. Post #31
    I paid $2 for this
    Miljaker's Avatar
    October 2010
    791 Posts
    That's the weirdest bastardization of jQuery and Javascript I've ever seen.
    Made it in like 10 seconds without thinking really..... it was mostly just a suggestion.


    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.
    Then give the image a link to the youtube video. Every decent mobile phone uses the youtube app to play videos and linking to a video will make sure it plays.

  32. Post #32
    Hullu V3's Avatar
    October 2009
    6,412 Posts
    I don't think he's developing it anymore or he changed the domain.

  33. Post #33
    I paid $2 for this
    Miljaker's Avatar
    October 2010
    791 Posts
    I don't think he's developing it anymore or he changed the domain.
    It's http://blsmithmedia.com/ now.

  34. Post #34
    secretly a furry
    Jelly's Avatar
    April 2011
    2,023 Posts
    Made it in like 10 seconds without thinking really..... it was mostly just a suggestion.
    I know but instead of

    Code:
    document.getElementById("embedload").innerHTML
    you could of just used

    Code:
    $('#embedload').html();