Can I display Video Linking around the Video player when it goes to “sticky”

naoki j. 3 years, 7 months ago

Can I display Video Linking around the video player when it goes to “sticky” right-bottom-side.

I could make the specific time Link for the Video in the page.

I want that Link around the Video player when it goes to “Sticky”

Can I do that?
If it were possible, how to do that?

Viewing 5 replies - 1 through 5 (of 5 total)

Mária Stašová 4 years ago

Hello Naoki,

thank you for your question!

I believe you are asking about the video links feature: https://foliovision.com/player/basic-setup/creating-video-links

With this feature, you get to create links leading to a specific time in the video.

The linking also works with sticky videos. The sticky video starts to play from the exact second in the link. You can try to use the feature with the sticky video on our website: https://foliovision.com/player/advanced/sticky-video

Let me know, if that is what you were looking for.

Thanks,
Maria

naoki j. 4 years ago

I know how that links work and I could do that.

I want to change the link itself location when it goes to “sticky”.
I want to show Link around Video player.

please have a look at this picture JPG

https://drive.google.com/file/d/1eIReuDn-yZpJZ9txJayrMYtlFYKzntbp/view?usp=sharing
Martin 4 years ago
Hello Naoki,

so it seems you would like to insert some additional HTML on top of the player (in your screenshot it’s Link 1, Link 2, Link 3 and Link 4) and only show it when the player is in the “sticky” position.

This job can be divided into multiple pieces:

1) Put in your HTML. You should be able to use the fv_flowplayer_inner_html filter as described in https://foliovision.com/player/advanced/api-programming#filters

2) Ensure that HTML is in .fp-player element, as that makes sure it floats.

3) Use some CSS to hide that HTML when the player is not sticky and show it when it’s sticky using CSS selector like this:
```
.your-custom-element {
   display: none;
}
.fp-player.is-sticky-right-bottom .your-custom-element {
   display: block;
}
```
It would also have to position it properly.

4) Finally figure out what links should be shown. These could be loaded from the postmeta fields with some nice interface, or perhaps it could even be stored together with FV Player video information – if needed.

So overall it’s not so hard for somebody how has experience with using WordPress filters to alter plugin behavior. Although for the (4) we would have to publish some editor API to really let you store links with the videos if needed.

Thanks,
Martin
naoki j. 4 years ago
Thank you very much!
I could do what I want to do!

I made a custom field by ACF, if this video link need or not,
And video link custom field.
```
function my_fv_player_custom_popup($html) {
	
	$FV_video_link_show = get_field('ビデオリンクを表示させますか');
	 if ( $FV_video_link_show == 1 ) {
     // if（ true ）

		 $link1_text =get_field('links_link1_text');
		 $link1_URL = get_field('links_link1');
		 $link1_show =''.$link1_text.'';
		 
		  $link2_text =get_field('links_link2_text');
		 $link2_URL = get_field('links_link2');
		 $link2_show =''.$link2_text.'';
		 
		  $link3_text =get_field('links_link3_text');
		 $link3_URL = get_field('links_link3');
		 $link3_show =''.$link3_text.'';

		  $link4_text =get_field('links_link4_text');
		 $link4_URL = get_field('links_link4');
		 $link4_show =''.$link4_text.'';
		 
		  $html .= '<div class="fp-player"><div class="start_video_link"><p>'.$link1_show.' / '.$link2_show.' / '.$link3_show.' / '.$link4_show.'</p>
		 </div></div>';
  return $html;
		 
 } else {
     // if（ false ）
     }
	
 
}
```
abd CSS
```
div.fp-player.is-sticky-right-bottom {
  margin-bottom:100px;
margin-right:20px;
	max-width: none !important;
}

/* when sticky*/

.fp-player.is-sticky-right-bottom{
   display: block;
}
div.fp-player.is-sticky-right-bottom .start_video_link {
    background: #f2fafd;
    width: 500px;
	height: 80px;
padding: .5em 1em;
position: absolute;
left: 60px;
top: 50px;
}

/*when not sticky */
 .start_video_link {
      background: #f2fafd;
    width: inherit;
	 height: 80px;
    padding: .5em 1em;
    display: block;
    position: absolute;
        top: -100px;
 
		
}

.wp-block-fv-player-gutenberg-basic {
    margin-top: 90px;
}
```
Martin 4 years ago

Hello Naoki,

I see you create div.fp-player in your my_fv_player_custom_popup() function as otherwise the FV Player loading process would just create a new DIV and append controls into it.

Thank you for posting these details!

Martin

Viewing 5 replies - 1 through 5 (of 5 total)

Can I display Video Linking around the Video player when it goes to “sticky”

Our Plugins

Free Tools

Footer

Our Plugins

Free Tools