Outside subtitles

You can put subtitles in an external container if you want to display them outside of the player. Just enable catching API events and catch the subtitles event, then throw the subtitle container outside. The player assigns the pjs_playerID_subtitle id to the subtitle container (playerID is the id of the player).

<div id="player1"></div>
<div id="subtitle_container"></div>
<script>
   var player = new Playerjs({id:"player1", file:URL, subtitle:[En]URL,[Es]URL});
   function PlayerEvents(event,id,info){
      if(event=="subtitles"){
         document.getElementById("subtitle_container").appendChild( document.getElementById("pjs_player1_subtitle") );
      }
   }
</script>

Important points

• Such subtitles need to be assigned a static position in CSS. For the example above it looks like this #pjs_player1_subtitle{position:static!important;top:auto;left:auto;}
• Subtitles will no longer be displayed in full screen mode. You can do the reverse operation if you need to return them back.
• You need to set the bottom padding value for the subtitles to be greater than the height of the control bar so that they don't move with it.
• Subtitle options (colors, sizes, etc.) will continue to work after outside moving (can be disabled in plugin settings).
• It works from version 18.4
  

---