Change Pinned Web Element content with a button

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,
A request has been made in the Facebook group to be able to change the pinned web element content.
Speaking with the team this can be done using javascript with a Go To URL action.

The attached project has a pinned web element that is displaying a YouTube video using its embed code.
It also has two text boxes being used as buttons that have the Go To URL action to trigger the javascript call to change the YouTube embed code.
In the Text 1 button, you will see the javascript call that has the YouTube embed code which is located between two single quotes and starts and ends with the iframe tag.

Code: Select all

javascript:
let webEl = player.getMediaObject('Element01');
webEl.innerHTML = '<iframe width="560" height="315" src="https://www.youtube.com/embed/ScT1a20IS3s" title="What\'s New in Pano2VR 7" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>';
The important bits
In this line:

Code: Select all

let webEl = player.getMediaObject('Element01');
You need to add the ID of the pinned web element you want to target, in this example it is Element01.

Another thing you need to look out for is any apostrophes in the YouTube embed code, for example, in the title text there is the word, What's, as in What's New in Pano2VR 7.
This will break the output.
The reason for this is that the iframe is within single quotes which determine the start and stop of the iframe.
The apostrophe is seen as a single quote so breaks the code.
The way to prevent this is to use a backslash just before the apostrophe, so What\'s.

The other button Text 2 is used to return back to the first video.
Regards,
Attachments
web_element_content.zip
(13.91 KiB) Downloaded 237 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/
Post Reply