Wanted: Persistent Youtube player PopUp.

C.M.G.
New Member

Posts: 14

Wanted: Persistent Youtube player PopUp. May 16, 2019 14:33:58 GMT -8

Post by C.M.G. on May 16, 2019 14:33:58 GMT -8

Im sorry if this is not in the correct section but bear with me...

I would like to play music on my forum but it seems doing audio alone is more of a hassle than just linking to a ready-made Youtube video. I want a persistent "player" that wont break up between page clicks.

I managed to place a small Youtube window in collapsible Sidebar Redux plugin container with this code:

<!DOCTYPE html>
<html>
<body>

<div id="player"></div>

<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
height: '100',
width: '188',
videoId: 'Uk7OhwxD88w',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING && !done) {
setTimeout(stopVideo, 0000);
done = true;
}
}
function stopVideo() {
player.stopVideo();
}
</script>
</body>
</html>

...available here: developers.google.com/youtube/iframe_api_reference

It worked just fine. Problem though is that you cant browse through the forum because clicking on anything kills the video/music stream.

So I thought perhaps a popup that remains afloat as you click through pages. I looked for a popup plugin and found two that worked with the above code, one of is Navbar Link Popup. The other is Board Popup. Seems any Plugin that allows HTML will work. Problem being, the popups wont allow you to navigate. The have full focus and you have to [X] out of them in order to click on anything else which again kills the video/audio stream.

So I'm looking for a PopUp that remains afloat in between page clicks and keeps the video/music playing without interruption or somekind of youtube video player compatible with proBoards that will continue playing in between page changes.

I dont necessarily need the video, just the audio from the Youtube link.

I know there is a solution for this, but what is it? Do I need a custom plugin?

Thank You.

Last Edit: May 16, 2019 14:35:36 GMT -8 by C.M.G.

Lynx
Veteran

Posts: 5,779

Wanted: Persistent Youtube player PopUp. May 16, 2019 22:52:57 GMT -8 C.M.G. likes this

Post by Lynx on May 16, 2019 22:52:57 GMT -8

C.M.G.,

I could probably edit the Navbar Link Popup and give it to you. All I'd need to do would be to have the modal set to false. I'm not sure if it'll work for what you want, but you can give it a shot. I'll post it as an attachment in this thread after I've made the edit. Heading to bed now as it's late here.

Conan Exiles forum: lynx-conan21.boards.net/

C.M.G.
New Member

Posts: 14

Wanted: Persistent Youtube player PopUp. May 17, 2019 9:38:22 GMT -8

Post by C.M.G. on May 17, 2019 9:38:22 GMT -8

May 16, 2019 22:52:57 GMT -8 Lynx said:

C.M.G. ,

I could probably edit the Navbar Link Popup and give it to you. All I'd need to do would be to have the modal set to false. I'm not sure if it'll work for what you want, but you can give it a shot. I'll post it as an attachment in this thread after I've made the edit. Heading to bed now as it's late here.

Thank you.

I may have to go the way of a separate proboards webpage. User clicks the music link, webpage with player opens up. User starts player then minimizes the page and continues on in the forum without audio interruption.

I'm curious to see if anyone else has some other option(s), but I appreciate your feedback. Your modified plugin may do the job. Looking forward to it.

Kami
Forum Cat

Posts: 40,029
Mini-Profile Theme: Kami's Mini-Profile

Wanted: Persistent Youtube player PopUp. May 17, 2019 12:05:22 GMT -8 Chris and C.M.G. like this

Post by Kami on May 17, 2019 12:05:22 GMT -8

Maybe I'm being silly here but is it actually possible to fulfill the second portion of this request -- the bit about not "breaking" the playback when the page loads?

I feel like it wouldn't be, since if you change the page all elements will have to be reloaded by the browser, which includes whatever plugin or code you're using to contain the embedded youtube video.

game dev by day, artsy web person by night

Lynx
Veteran

Posts: 5,779

Wanted: Persistent Youtube player PopUp. May 17, 2019 12:22:43 GMT -8 Kami and C.M.G. like this

Post by Lynx on May 17, 2019 12:22:43 GMT -8

May 17, 2019 9:38:22 GMT -8 C.M.G. said:

May 16, 2019 22:52:57 GMT -8 Lynx said:

C.M.G. ,

I could probably edit the Navbar Link Popup and give it to you. All I'd need to do would be to have the modal set to false. I'm not sure if it'll work for what you want, but you can give it a shot. I'll post it as an attachment in this thread after I've made the edit. Heading to bed now as it's late here.

Thank you.

I may have to go the way of a separate proboards webpage. User clicks the music link, webpage with player opens up. User starts player then minimizes the page and continues on in the forum without audio interruption.

I'm curious to see if anyone else has some other option(s), but I appreciate your feedback. Your modified plugin may do the job. Looking forward to it.

I just tested this after making modal false - it does not maintain across web pages. Any video / audio running in the popup will cease as soon as you change the page. Sorry, but it looks like you'll need to find an alternate method.

Conan Exiles forum: lynx-conan21.boards.net/

C.M.G.
New Member

Posts: 14

Wanted: Persistent Youtube player PopUp. May 17, 2019 17:35:58 GMT -8

Post by C.M.G. on May 17, 2019 17:35:58 GMT -8

OK, I came up with a solution. It's not pretty but it works.

1. Made a link on my home page to a custom page.

2. Custom page has Youtube embedded music (videos) in the Zone containers.

This is what it looked like while testing it...

The user can then choose what music video to listen to.

The RETURN HOME link will return you to your homepage via a new TAB (so it remains playing music in the background.)

<a href="http://test-board01.proboards.com/" target="_blank"><u>RETURN HOME</u></a>

target=_blank will open up the link in a new TAB instead of overwriting your current page.

You can then press on and do what you do on your board while the music continues playing in the background in the separate TAB.

Not exactly a graceful attempt at a music player, but it works.

1. For now, I want to see if I can stop one player if another one is started. Right now you can start all players at once making quite the racket.

2. I want to lean how to include playlists instead of straight links.

3. Need to lean how to make a decent RETURN button instead of just a link.

4. How to keep multiple copies of the Tabbed music page from happening if the user gets trigger happy with the mouse.

5. Lastly, how to show "currently playing: Piano Music" in my News Bar when playing.

This has been interesting exercise and I appreciate your feedback on the matter.

TY

BTW: If anyone is interested, this is the Youtube link: youtu.be/XULUBg_ZcAU. I will be adding more in the other Zone containers.

Last Edit: May 17, 2019 17:58:34 GMT -8 by C.M.G.

Lynx
Veteran

Posts: 5,779

Wanted: Persistent Youtube player PopUp. May 18, 2019 0:11:02 GMT -8

Post by Lynx on May 18, 2019 0:11:02 GMT -8

For #3, try replacing this:


<a href="http://test-board01.proboards.com/" target="_blank"><u>RETURN HOME</u></a>

with this:


<a href="http://test-board01.proboards.com/" class="button" target="_blank">RETURN HOME</a>

I haven't tried it, but I believe that class is PB's default class for a button. If that doesn't work, try this:


<a href="http://test-board01.proboards.com/" target="_blank"><span class="button">RETURN HOME</span></a>

Conan Exiles forum: lynx-conan21.boards.net/

C.M.G.
New Member

Posts: 14

Wanted: Persistent Youtube player PopUp. May 18, 2019 3:10:18 GMT -8 Lynx likes this

Post by C.M.G. on May 18, 2019 3:10:18 GMT -8

Hi MSG.

I tried the code you gave me and these are the results with my original link being first...

Your first suggestion gave a more attractive button because it produced some padding around the words.

Your second suggestion also worked but as you can see...no padding.

Either way, they both worked.

Thank You!!!

BTW, I noticed your Helpful Member icon

.

Any idea on how to add an icon like that on a member's profile at that exact location?

Last Edit: May 18, 2019 3:12:47 GMT -8 by C.M.G.

Retread
Veteran

Tribbial Pursuit.

Posts: 5,014

Wanted: Persistent Youtube player PopUp. May 18, 2019 5:57:23 GMT -8 Lynx and C.M.G. like this

Post by Retread on May 18, 2019 5:57:23 GMT -8

May 18, 2019 3:10:18 GMT -8 C.M.G. said:

BTW, I noticed your Helpful Member icon

.

Any idea on how to add an icon like that on a member's profile at that exact location?

Hi C.M.G.

This plugin: Add Image to Mini Profile by Ulises will allow you to place icons of your choice in the upper right corner of the mini-profiles of select members of your forum.

The support thread is here: support.proboards.com/thread/606507/add-icon-corner-mini-profile

EDIT:

btw, that icon is not exclusive to the Helpful Members group on the Support Forum. ProBoards is using that to identify (and provide a description) for certain groups. In addition to the staff groups, they've also added the Helpful Members group to that function.

Last Edit: May 18, 2019 6:12:27 GMT -8 by Retread

I'm not an expert, I'm one of your peers. A forum owner, just like you. Sharing knowledge builds a better community.
Proud Member of

Guitarnutz2

C.M.G.
New Member

Posts: 14

Wanted: Persistent Youtube player PopUp. May 18, 2019 18:21:11 GMT -8 Retread likes this

Post by C.M.G. on May 18, 2019 18:21:11 GMT -8

May 18, 2019 5:57:23 GMT -8 Retread said:

May 18, 2019 3:10:18 GMT -8 C.M.G. said:

BTW, I noticed your Helpful Member icon

.

Any idea on how to add an icon like that on a member's profile at that exact location?

Hi C.M.G.

This plugin: Add Image to Mini Profile by Ulises will allow you to place icons of your choice in the upper right corner of the mini-profiles of select members of your forum.

The support thread is here: support.proboards.com/thread/606507/add-icon-corner-mini-profile

EDIT:

btw, that icon is not exclusive to the Helpful Members group on the Support Forum. ProBoards is using that to identify (and provide a description) for certain groups. In addition to the staff groups, they've also added the Helpful Members group to that function.

Thanks dude. The plugin worked like a charm.

Last Edit: May 18, 2019 18:24:35 GMT -8 by C.M.G.