Youtube Video Plugin - Using API instead of URL for more player control

[SmaRTeY]

Hi there,

since my original post was a brainfreeze (thanks dev101) I decided to change it's context making more sense and still offering 'something' new.
Underneith code incorporates both the official Youtube API code and a responsive fix mentioned earlier by another Osclass user.

In case you're interested in the whole API stuff, have a look here, it will offer you all control through API:
https://developers.google.com/youtube/iframe_api_reference

This is the code that should go into the file: item_detail.php of /oc-content/plugins/youtube folder.
It adds a responsive 'fix' and uses the official YouTube API for more player/event control.

Code: [Select]

<!--
* Based on YouTube API: https://developers.google.com/youtube/iframe_api_reference
* By SmaRteY - 2015
-->
<?php if(isset($detail['s_id']) && !empty($detail['s_id'])) { ?>
<style>
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="video-container">
<div id="player"></div>
</div>
<script>
  // load 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);

  // create an <iframe> (and YouTube player) after the API code downloads.
  var player;
  function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
  height: '390',
  width: '640',
  videoId: '<?php echo trim($detail['s_id']); ?>'
});
  }
  function stopVideo() {
player.stopVideo();
  }
</script>
<?php } ?>


Regards,
Eric

[dev101]

Oh SmaRTeY,

iframe update was proposed a year ago or so @ github (there is still a PR of mine there somewhere ... never accepted), but later v2.0 was released by OT, with iframe and some security improvements.

You should definitely pay more close attention to Market, you know

Regards

P.S. Marry Christmas & Happy New Year to you & your closest, too

[SmaRTeY]

Hi dev101,

WoW man, you are correct
I THOUGHT I was doing a fix.....very strange since I was having two versions; one using iFrame and the other using Object version.

I changed the context of the first message, should make better sense now


Thanks,
Eric

[dev101]

Yes, on that responsive fix, I think there is one topic (at least) here on forum where that was discussed/solved as well, but it does not mind to have it mentioned here, of course. That hack is very well known (it originated from someone on the net), and it worked for object version, too.

About that present, well, I do have an idea... but I will send you details via email

Regards
dev101

[SmaRTeY]

I'll be looking forward to it