Edge animate - You tube video does not support in Mozilla Firefox ?

Your video link code in not correct it is missing a few elements.

Your code should look like this:

youtubevid.attr('src','http://www.youtube.com/embed/ZHUjDWpHJvU?rel=0;');

Your code is missing this in the end of the video link : ?rel=0;

I am having the exact same problem and that didn't fix it...

http://www.ruesterprod.com/ruesterprod_edge_rebuild/

my code looks like this:

var youtubevid = $("<iframe/>");

sym.$("vcontainer").append(youtubevid);

youtubevid.attr('type','text/html');

youtubevid.attr('width','640');

youtubevid.attr('height','360');

youtubevid.attr('src','http://www.youtube.com/embed/4yGuF8982gk?rel=0');  // url/Video_Id

youtubevid.attr('frameborder','0');       // 1 | 0

youtubevid.attr('allowfullscreen','1');   // 1 | 0

(I'm trying to load the video that animates in)

...and here's my source file if you need it... http://www.ruesterprod.com/edgehidesymbols/rpedgerebuild2.zip

Your problem has to do with the Youtube video...

I tested other Youtube videos and your code worked perfectly..

I have done some research and the only answer I can come up with is ...

This seems to only work with HTML5 Youtube videos

Your Youtube video is a Flash video..

If this is from your Youtube account perhaps you have not enabled HTML5 options.

http://www.youtube.com/html5

That link you sent... that page says that html5 is still in a trial mode... so very few people would be in that trial, correct?

Anyhow... I should be able to embed Youtube videos into my site and have them play on Firefox (That's what I did with my old site), so what would be causing the issue? The animation? If so, I tried to solve that by animating a still capoture of the youtube thumbnail in & out, and only having the youtube video appear upon landing... would that be best, or is there another way?

Your code as is works with HTML5 Youtube videos on FF..

If you take your vcontainer div out of the group of divs it works with your video..

I don't know why this happens but it does???

I tested it further and if the group is not animated you can append your video to the vcontainer..

Once you animate it it won't work...

Here are two samples:

http://www.meschrene.puremadnessproductions.net/Samples/Video/Test-Youtube-Animate.html    ///animated

http://www.meschrene.puremadnessproductions.net/Samples/Video/Test-Youtube-Animate.zip

http://www.meschrene.puremadnessproductions.net/Samples/Video/Test-Youtube.html ///not animated

http://www.meschrene.puremadnessproductions.net/Samples/Video/Test-Youtube.zip

Try this:

Keep code as is, but.....

Make sure the rectangle (container) has opacity set to 0%, if your container is a symbol containing a rectangle, also set the rectangle inside of the symbol to 0% opacity.

This resolved my issues with display in FF.

Hope this helps!

I am having the same problem.  The rectangle inside the symbol is 0% opacity and the code appears to be right but it still doesn't work, it only shows the poster image of the video in Firefox 29.0.1.

Here is a link to my sample ad: http://www.capitalpress.biz/html5ads/youtube/embeddingYoutube.html

And my Stage code:

var youtube = $("<iframe/>");

sym.$("video").append(youtube);

youtube.attr('type', 'text/html');

youtube.attr('width', '640');

youtube.attr('height', '360');

youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

youtube.attr('frameborder', '1');

youtube.attr('allowfullscreen', '0');

Brandon

Update: What I thought was a poster of the video is actually the video itself.  Unfortunately the 0 opacity rectangle that is needed to show the video is sitting on top of the iFrame so it does not recognize the mouseover/click/etc.

Any thoughts on how to fix it?

Brandon

EUREKA!!!   After many attempts I think I figured it out!!

Create a rectangle 640px x 360px on the stage.  Convert it to a symbol with the name video.  Go inside the video symbol and delete the rectangle on the timeline. (This leaves video as an empty frame)

Back in the stage I added this code in the stage actions under compositionReady:

var youtube = $("<iframe/>");

sym.$("video").append(youtube);

youtube.attr('type', 'text/html');

youtube.attr('width', '640');

youtube.attr('height', '360');

youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

youtube.attr('frameborder', '1');

youtube.attr('allowfullscreen', '0');

I tested it in Firefox 29.0.1 with both the HTML5 Youtube player and the Flash Youtube player and it worked for both.  Here is a link to my test video:

http://www.capitalpress.biz/html5ads/youtube/embeddingYoutube.html

Hi CPBTenner,

Thank you for sharing your solution with us.

Thanks,

Preran

Working with others I have found that Edge Animate has a bug that sometimes causes an error when trying to publish or save a file with a blank symbol.  The workaround fix for this is to go inside your symbol, in this case video, and create a 1px x 1px rectangle and place it in position 0,0.  Change the alpha to 0 so it is hidden.  This should fix the glitch and still make your video function correctly.

...so I've gone ahead and created the blank video symbol and the youtube movie plays fine, except when I apply the Action:

sym.$("video").hide();

...it stays visible. Anyone know how I'd hide that programatically?

Thanks for your help,

Rich

To test my youtube video I created 2 buttons, show video and hide video.

The code for my hide video is the following:

sym.getSymbol("video").deleteSymbol();

The code for my show video is the following:

var youtube = $("<iframe/>");

sym.$("video").append(youtube);

youtube.attr('type', 'text/html');

youtube.attr('width', '640');

youtube.attr('height', '360');

youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

youtube.attr('frameborder', '1');

youtube.attr('allowfullscreen', '0');

// Show an Element.

sym.$("video").show();

Hopefully this helps.

Brandon

Brandon

Thanks for your response but it's still not working.

I double checked the names, my typing, the Action... and I can't see why this show/hide won't work.... Is there something special with showing/hiding a symbol that isn't well known/published?

Rich

Not usually.

What I did, which is in the code above, is put the code for inserting the video into my show button, instead of on the stage as compositionReady.  I did this so that I could just delete the videoSymbol when I click on the hide button.  The video symbol is recreated when I click on the show button.

I am on deadline right now so I cannot delve deeper into the issue at the moment, but here is a sample where the show/hide is working.  It isn't my finished product though as the video continues to play when the symbol is hidden (hence the deleting versus hiding above)  I will try and catch back up with you tomorrow or Friday if you are still having issues.

www.capitalpress.biz/html5ads/youtube/testEmbeddingYoutube.zip

Good luck,

Brandon

Try this:

Show Button:

//code to embed youtube into symbol

var youtube = $("<iframe/>");

sym.$("video").empty().append(youtube);

youtube.attr('type', 'text/html');

youtube.attr('width', '640');

youtube.attr('height', '360');

youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');

youtube.attr('frameborder', '1');

youtube.attr('allowfullscreen', '0');

// Show an element

sym.$("video").show();

Hide Button:

sym.$("video").empty();

// Hide an element

sym.$("video").hide();

Sorry, I worked on this very problem for quite some time so had many versions of the same test.  If you would like I can share this test file as well, it worked perfectly in Firefox.

Brandon

Thanks for your input Brando but it's still not working. I'm going a different way with this project for now and will revisit this down the road.

I'm really liking Edge Animate, but there are still some bugs in it so I won't be losing a lot of sleep over these issues.

Thanks again,

Rich

Rich,

I'm sorry you still can't get it to work.  Don't give up on Edge Animate, it is a great program with SO many possibilities.

Here is a link to my working sample. Remembering back to when I had the issues the key to making it work was the empty(); function for both the Hide and Show buttons.

www.capitalpress.biz/html5ads/youtube/CreateDeleteYoutube.zip

Best of luck!

Brandon

I have two issues with two vids (from vimeo) on the same timeline.

Toggling between Display On/Off is no problem.

Instead of using jQuery hide/show you can also control it with the Display/OnOff keyframes for each element on the timeline.

BUT..

1) How to prevent the instances from playing (while not displayed)?

The new html5 audio features (pause/mute...) will not work because the videos are external.

I need a load/unload or append/remove function for the symbol which holds the iframe, ...any ideas?

2) The Start/Play Button in the video controls panel is not clickable in FF 30.0/Mac. ?

Sonja

Sonja,

I believe I can help, first with why the controls panel is not clickable in FF.

I am guessing you created your video symbol by drawing a box, then converting it to a symbol.

The box you created becomes an invisible barrier when you convert it to a symbol.  The solution is to go into your video symbol and resize the box to 1px x 1px, then put it in the upper left corner at position 0,0. This should solve the clicking issue.

As for the playing when not displayed, the solution I found was to use the .empty() function. I posted my code above from my CreateDeleteYoutube sample.  You can download it to see how I made it work.

Hopefully this helps!

Brandon

Thanks Brandon!

The empty() method is really the key! Everything works fine now!

Plus: the Play Button is clickable in FF now..

I have something... I want to add a video and allow it to be looping as a background but.. I have a starting sequence for a few seconds then after that it will loop? Is this possible with edge and muse working together? an opening sequence that turns into this loop. The problem with muse is a fullscreen background does not center or scale but with html5 I know I can do it. I have tried stuff with another site i am working on but on different resolutions is looks pretty bad. And will not work in safari but the albiononline one does.

You might be better off breaking your video into 2 parts: the intro and the loop. Then put your intro onto the timeline first and when finished roll into your loop.

HTH,

Rich

I have a question Brandon.

The test file works for me , but when i try to enter my own youtube link, it doesn't appear. How did you embed the link ? I think my problem is solved if i'm able to embed it that way

The important part to embedding a YouTube video is the random assigned numbers and letters found after embed/ (youtube.attr('src', 'https://www.youtube.com/embed/MyFv6UKsW70?rel=0');).  Go to your YouTube video and look at the link, here is my example: http://www.youtube.com/watch?v=MyFv6UKsW70. Grab the last bit and paste it into the code from my example after embed/ and it should work.

Good Luck!

Brandon

Okay i came with the solution thanks to everyone here!

• First you make a symbol then you dubble click that symbol to open the symbol, delete what's inside.
• When that's done you give your symbol a name. Carefull don't call it video, edge animate won't support that name futhermore you can name it whatever you want.
• then you go to your stage and enter the code below, the bold parts are code and the other parts explain the code

var youtube = $("<iframe/>");

This always stays the same, you can give the variable (youtube in this case) any name you want

sym.$("movie").append(youtube);

In this case is my symbol name is movie,  you can also name that whatever you want, but  carefull, don't call it video!

after that you again use your variable name between the second braces

youtube.attr('type', 'text/html');

Just leave it like this

youtube.attr('width', '640');

Make sure your symbol is the same size as in this code, otherwise that could give you problems

youtube.attr('height', '360');

Make sure your symbol is the same size as in this code, otherwise that could give you problems

It is importand to manage instert your link in the following way:

youtube.attr('src', 'https://  this always stays! when you embed from youtube youtube won't put https:// before it and it's required to load.

Then you go to your youtube video, you will see share then click embed and  you will see the following code, only use the bold part below in this link:  

<iframe width="560" height="315" src="//www.youtube.com/embed/T7MqEEGGpus" frameborder="0" allowfullscreen></iframe>

after that you end with  ');

so you will see this when your done inserting the link: youtube.attr('src', 'https://www.youtube.com/embed/T7MqEEGGpus');

youtube.attr('frameborder', '0');

if you want a border change it into 1, 0 means that you don't want your video to have a border

youtube.attr('allowfullscreen', '0');

Hope this solves the problem for everyone!

Greetings,

Jens