[Tony EParticipant]

Hi,

I added full screen button to jPlayer, Sample: http://www.tiikoni.com/tis/view/?id=73e53b8
when i click the button it works but only audio playing, the video is greyed: http://www.tiikoni.com/tis/view/?id=315bf14

/function/global/featured.php

<ul style="background:none;position:relative;right:35px;float:right;" class="jp-controls">
<li><a href="#" class="jp-full-screen"><i class="x-icon-arrows-alt"></i></a></li>	
</ul>

Regards,
Tony

[MrinalMember]

Hi Tony,

Can you please share your website URL here instead of image screenshot? As this issue needs to be investigated more.

Thanks!

[Tony EParticipant]

Here you go http://173.230.173.132/videos/

Thanks!

[MrinalMember]

Hi Tony,

You need to allow fullscreen (webkitAllowFullScreen mozallowfullscreen allowFullScreen) for the videos shortcodes, example shortcode:
[x_video_embed]<iframe src="http://embed.ted.com/talks/reggie_watts_disorients_you_in_the_most_entertaining_way.html" width="560" height="315" frameborder="0" scrolling="no" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>[/x_video_embed]

How did placed your video shortcodes in the site? Check this: http://theme.co/x/demo/integrity/1/shortcodes/responsive-video/ Fullscreen videos are showing perfect here.

Can we’ve login info of your site here? as a private reply if you can’t resolve the issue even after following the above example, so we can take a look to it.

Have a nice day, Cheers!

[Tony EParticipant]

Hi,

I am using video portfolio MP4 File URL, Anyways the code below solved the issue by Using the Browsers’ New HTML5 Fullscreen Capabilities.

  <script>

 function goFullscreen(id) {
    // Get the element that we want to take into fullscreen mode
    var element = document.getElementById(id);
    
    // These function will not exist in the browsers that don't support fullscreen mode yet, 
    // so we'll have to check to see if they're available before calling them.
    
    if (element.mozRequestFullScreen) {
      // This is how to go into fullscren mode in Firefox
      // Note the "moz" prefix, which is short for Mozilla.
      element.mozRequestFullScreen();
    } 
	 if (element.msRequestFullscreen) {
      // This is how to go into fullscren mode in IE
        element.msRequestFullscreen();
    }
	
	else if (element.webkitRequestFullScreen) {
      // This is how to go into fullscreen mode in Chrome and Safari
      // Both of those browsers are based on the Webkit project, hence the same prefix.
      element.webkitRequestFullScreen();
   }
   // Hooray, now we're in fullscreen mode!
  }
  
   </script>

  <div id="x_jplayer_<?php echo $entry_id; ?>" class="jp-jplayer-video"></div>
  <ul class="jp-controls">
  <li><a href="#" class="jp-play" tabindex="1"><span>Play</span></a></li>
  <li><a href="#" class="jp-pause" tabindex="1"><span>Pause</span></a></li>
  <li class="full"><a href="#" onclick="goFullscreen('x_jplayer_<?php echo $entry_id; ?>');"><i class="x-icon-arrows-alt" ></i></a></li>
  <li class="jp-current-time"></li>
  </ul>

http://www.assyriantv.net/videos/

Thanks!

[Kosher KMember]

Your Welcome

[Author]

Posts