Can You Help Me Get this Functionality for YouTube Videos?

[Bassman]

Hello,

I am making a website which has a lot of video examples. I was wondering if I might ask for some assistance with a few things regarding YouTube videos and their functionality?

Here is a web page that I would like to emulate for its video functions - http://reachrecords.com/videos/

Right now I have a named iframe setup on the page with image links underneath. The links have the YouTube source in the link dialogue and the iframe in the "Open link" dialogue.

I am running into two problems:

1) Auto start of the videos. I would like to have the videos start playing upon pressing the link. By default, when you press the link the YouTube video appears but you have to press play in the video window.

I found the code &autoplay=1 This works when added to the end of the link, but it ONLY works when just a single video is on the page. If I add this to another link the first link still works but the second does not.

Does anybody know how to get the autostart functionality working for multiple videos?

2) Jump to the iframe heading. On the referenced web page, the list of videos is huge. When you scroll down and press a link the page takes you back up to the video iframe to watch. Since I am already using the web link for the YouTube source, it seems I can not use the heading link function as well in Xara. Is there another way to jump to a section of a page with a link execution?

I have attached my Xara file so you can see how I have it setup.

Thanks for your help!

Multi YouTube Test.xar

[Bassman]

No luck! I guess this is more difficult than I expected. Thanks.

[Egg Bramhill]

Hi Bassman.

I can't help you on linking back to the top of the screen but I have managed to get the autoplay working correctly.

See attached xar. I had to use a couple of my videos to test as only one of your links worked correctly. I also added ?rel=0 to the url to stop it suggesting alternative video on completion of playing.

[Spitsoor]

Just thinking with you here guys....

would it be possible to create another layer with anchors that anchor to the iframe at the top?
just squares as big as the videos at say 99% opacity? you don't see them then. I honestly don't know if it would take the videoplay as well....but it is at this moment all that comes to mind.

[Egg Bramhill]

Spitsoor, I don't think that would work. A button on top of another button just cancels the lower one out. I tried appending <a> tags to the end of the video links but couldn't get that to work either.

I forgot to mention Bassman, I never knew you could link to an iframe in the manner you use. Nice solution.

[Spitsoor]

Spitsoor, I don't think that would work. A button on top of another button just cancels the lower one out.

yeah....I was kinda afraid of that....

[Bassman]

Thank you Egg. The little bit of code makes the difference! For future reference, Here is how the page is setup:

1) Make an iframe and name it - <iframe name="theatre" width="100%" height="100%" frameborder="0" allowfullscreen &autoplay=1></iframe>

2) Create a link (anything, text or image) using this code - https://www.youtube.com/embed/ ?rel=0 &autoplay=1

3) Copy a YouTube video's source and paste it into the blank spot in between the embed and the ? line #2's code

4) In the same link dialogue change "Open Link" to the name of your iframe. In my case I typed in "theatre".

5) Rinse & repeat for multiple videos.

I learned this watching a video by Roberto Matthews - https://www.youtube.com/watch?v=GGQrEWiX7M8

Thanks again Egg! This really helps.

[Egg Bramhill]

[Bassman]

Just figured out how to get a normal embed YouTube video to autostart and play inside the created iframe. So now I can have a video autoplay when the page is loaded but stop playing when another video is selected from the links.

You just have to add the name of your iframe to the YouTube embed code. Basically you are naming the YouTube video the same name as your iframe which forces it to behave like the other iframe videos. I just inserted name="theatre" into the video's placeholder code and it is working well.

Hope this helps anybody looking for higher level YouTube functionality.

[Spitsoor]

Cool! Thnx!