[Coldkilla]

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!

[xmariusx]

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.

[TerabyteS_]

xmariusx posted:

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.

[Coldkilla]

I'm using Chrome, 16.0.912.77 as well. Also I have Firefox and IE9. Both of which display the same abruptness.

[SEKCobra]

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.

[Coldkilla]

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.

[SEKCobra]

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.

[Coldkilla]

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?

[xmariusx]

Ohh I thought he meant the buttons where not fading. My bad.

[Spero78]

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

[Coldkilla]

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.

[TerabyteS_]

Coldkilla posted:

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

<param name='wmode' value='transparent'></param>

Right after the opening <object ...> tag.

[jaybuz]

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.

[reeferdk]

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

[Coldkilla]

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>

[Darkwater124]

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.

[Coldkilla]

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.

[TheDecryptor]

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.

[SEKCobra]

jwplayer works fine with youtube.

[TerabyteS_]

Coldkilla posted:

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.

[TheDecryptor]

<param> tags behave like <img> tags, they don't need a closing tag.

[Blasphemy]

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.

[jaybuz]

Nice but the video doesn't work in IE. Opera doesn't fade at all and fading in, in Firefox kinda jumps.

[Blasphemy]

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.

[jaybuz]

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.

[Coldkilla]

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.

[Miljaker]

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.

$(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:

<div id="embedload">
<img src="imageyouwantdisplayedfirst.png"/>
</div>

Give the element where the buttons are placed

id="embedunload"

I probably did something wrong there... but don't feel like testing it.

[TheDecryptor]

Coldkilla posted:

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

[KmartSqrl]

Miljaker posted:

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.

$(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:

<div id="embedload">
<img src="imageyouwantdisplayedfirst.png"/>
</div>

Give the element where the buttons are placed

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.

[Jelly]

Miljaker posted:

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.

$(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:

<div id="embedload">
<img src="imageyouwantdisplayedfirst.png"/>
</div>

Give the element where the buttons are placed

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.

[Miljaker]

Jelly posted:

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.

KmartSqrl posted:

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.

[Hullu V3]

I don't think he's developing it anymore or he changed the domain.

[Miljaker]

Hullu V3 posted:

I don't think he's developing it anymore or he changed the domain.

It's http://blsmithmedia.com/ now.

[Jelly]

Miljaker posted:

Made it in like 10 seconds without thinking really..... it was mostly just a suggestion.

I know but instead of

document.getElementById("embedload").innerHTML

you could of just used

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