Embed YouTube Video Flash and HTML5

Special forum to share and discuss skins for Pano2VR and Object2VR
Post Reply
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi All,
This seems to be a sticking point, embedding YouTube videos in Flash and HTML5.
Im going to run through this with also including how to use the "Don't use in Flash" and "Don't use in HTML5" feature found in the new skin editor so you can use the Flash Fallback Player and everything still works.

First you need to get the correct code from YouTube for both the Flash and HTML5 videos.
On the YouTube website choose your video, in this case New Skin Editor.
Under the video you will see the Share link. Click this then click the Embed link.

For the Flash code select Use old embed code, this changes the code, but we do not need all of it. You only need the bit thats in Red:

<object width="560" height="315"><param name="movie" value="//www.youtube.com/v/_sQj8f-toXs?version=3 ... ram><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/_sQj8f-toXs?version=3&hl=en_GB&rel=0" type="application/x-shockwave-flash" width="560" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>

However for it to work it needs to be an absolute URL so you need to add the http:// bit so it looks like this: http://www.youtube.com/v/_sQj8f-toXs?version=3

For the HTML5 code deselect Use old embed code, you have the correct iFrame code needed for the HTML5 output:
<iframe width="560" height="315" src="//www.youtube.com/embed/_sQj8f-toXs?rel=0" frameborder="0" allowfullscreen></iframe>

Thats it you now have your code for both Flash and HTML5.


Download the project for your build then open the p2vr project file/s and click Create All to generate the output folder/s

Pano2VR
YouTube.zip
(49.72 KiB) Downloaded 322 times
Pano2VR Pro
YouTube Pro.zip
(47.57 KiB) Downloaded 428 times
How this works is in the Hotspot Editor the Flash video code is placed in the Hotspots Title area and the HTML5 video code is in the URL area. The Title for the video is in he Target area.

The Flash output uses a set text action using the placeholder $hs so the code in the hotspots title is used.
For the HTML5 output the placeholder $hu is used which reads the code from the URL.
In both outputs the place holder $ht is used to display the title text for the video which is entered in the hotspots Target area.

The output Flash_and_HTM5 uses the HTML5 output with the Flash Fallback Player, so no separate Flash output.
The skin for this has all the elements in from both the Flash and HTML5 skins.
Except the relevant elements have the Don't use in Flash and Don't use in HTML5 feature set.
This means the video will still play regardless of output selected.

Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

HI Hopki,

So, this is sort of but not quite working for me. I copied your steps to the letter, then put my own links to the video I wanted to play in the hotspot fields. The only difference is that I need a polygon hotspot and not a crosshair. So, I added my poly hotspot, filled in the title and url as instructed, then, in the skin editor I deleted the crosshairs and used the 'Hotspot Proxy' on the 'video_bg' item, but with the same mouse-click show actions you used for the crosshairs.
When I click the hotspot area the video pops up fine, but another window also opens up saying "File not found: pano/<iframe width="853" height="480" src="//www.youtube.com/embed/12345etc"
So why is it looking for another file in my output folder?
Also, clicking the close cross button only closes the video but leaves the video_bg showing? I'm so close but no cigar...

All this is so I can have a picture of a video frame on a wall with a big 'play' arrow on it, which when clicked, plays the video. Using the media editor doesn't work as you can't hide the video so it has to be a pop up. It doesn't have to be youtube really but that makes things easier.

Any ideas where I'm going wrong?

Thanks
Roger
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Roger,
Which version are you using P2VR or P2VR Pro?
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

I'm on 4.5.0 Pro 64bit on a mac
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

I tried using your example and just made a polygon hotspot (not an area one) in place of the point one and got the same error? It seem to be looking for a file. Also, it won't hide the player afterwards.
I've been at it all day and can't see where I'm going wrong, unless its a bug

OK so I've semi-sorted it. I just used point spots instead of the poly. Now the video is playing properly and hiding properly. All I have to do now is figure out why all my navigation hotspots have taken on the same image as the video hotspots!

Sorted!! Renamed 'em all navigation and that did it.

So its all working now, but there's definitely an issue with poly hotspots and youtube vids.

Also, note that your flash url in the 'title' field is " http://www.youtube.com/v/_sQj8f-toXs?hl=en_GB&version=3 " which is NOT what you say in red above but has extra bits.

Cheers
I need a large beer!
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi,
The Poly hotspots are looking for either a node or URL, so this is why it is opening a page.
If you leave the URL blank and set this data in the Target text field then it will work, of course you can't have the title.

How to:
In the Hotspots Editor, copy and remove the iFrame code from the URL text field and add it to the Target text field in the Hotspot Editor. Also give the Poly Hotspot the ID "popup".

HTML5 Skin
In the Skin Editor add a node marker to the skin and set "popup" as the Hotspot Proxy ID and give it the actions:
Mouse Click => Show Element => video_bg
Mouse Click => Show Element => video_player
Mouse Click => Set Text $ht => video_player

Flash Skin:
Same as above but set the set text action to:
Mouse Click => Set Text $hs => video_player

For HTML5 with the Flash Fallback Player add two node markers, and set the HTML5 node marker to Do Not Use In Flash, and the Flash node marker Do Not Use In HTML5.

Remember to turn off the system Hotspot Text box under advanced settings so you don't get a tool tip when you hover over the Poly Hotspot.

The Flash URL for the video is different but both work, just follow how to get the required code in the above post.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

Thanks Hopki,

That all makes sense now. I might go back and set up poly hotspots just to see if I can do it.

Cheers,
Roger


Edit; my flash version does not seem to work (at least not in flash player or dragging onto chrome) I get the video_bg pop up ok but nothing plays. There's no evidence the video is even loading. I've checked and double checked my url and its definitely correct. Do I need something else? Some kind of external flash loader?

Thanks
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

For Flash you need to use the external loader, for HTML5 a text box to display the video.
See attached skin.
Regards,
Hopki
Attachments
flash_and_html5.ggsk.zip
(4.17 KiB) Downloaded 274 times
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

Yep, I have that external loader in my skin, in fact I copied it from your original example. (looks like a grid of globes in the skin) However the flash movie doesn't play.
I'll re check all my settings tomorrow but it's time to finish for the day today.

Cheers,
Roger
rojharris
Posts: 22
Joined: Tue Feb 03, 2009 6:21 pm

Morning Hopki,

99% Sorted. I shouldn't have specified a fallback file but just let the HTML5 output make its own and ensureing 'enable html' was on, then the player got included. Only one issue now:

I did eventually get the flash player to load on my scene by enabling the html as I mentioned above, but the video is not playing at the correct size in the player, its way too small, even though the player is set to the bigger size in the skin. I notice there's no mention of size in the code that's copied into the Title hotspot field. Can i force it to play at the correct size? The HTML5 one is working perfectly.

Thanks,
Roger
KWimberg
Posts: 16
Joined: Tue Jan 21, 2014 5:21 pm

Hi Hopki,
I am using the Controller-new.ggsk skin and copying into it the elements from your skin: flash_and_html5.ggsk

I cannot get the youtube video to load, or even the video background - is something conflicting?

I do get a youtube video to load when I use your flash_and_html5 skin alone, so I know I am entering the youtube embed code correctly.

Thank you,
Kristin
Kristin
User avatar
Hopki
Gnome
Posts: 12999
Joined: Thu Jan 10, 2008 3:16 pm
Location: Layer de la Haye, Essex UK
Contact:

Hi Roger,
You have no control over the size served up in Flash unfortunately.

Hi Kristin,
If you copy the elements from the flash_and_html5 skin and make sure you have entered the correct information in the hotspot there there should be no reason for it not to work.

Try using the error console to see what is happening when you click the hotspot.
Regards,
Hopki
Garden Gnome Support
If you send an e-mail to support please send a link to the forum post for reference.
support@ggnome.com
https://ggnome.com/wiki/documentation/
Post Reply