×
Kunena 5.2 RC 1 Released (25 Oct 2020)

The Kunena team is thrilled to announce the first public release candidate of Kunena 5.2, a native Joomla extension for Joomla 3.9. This is a development release and should be only be used for testing; this version is not recommended for live websites at this stage.

The purpose of this release is to encourage testing by downloading, installing and identifying any problems or shortcomings that people may discover. K 5.2.0 RC1 is stable and we are aware that people will discover defects. We encourage you to use the forum to report defects, as soon as they are discovered, so that the development team can work through the problems before the release of K 5.1 as a stable product. Reporting defects does not mean that the problems can or will be fixed. The Kunena team is looking forward to hearing your feedback on how well we have achieved our design goals.

× Please note: The Kunena project team takes NO responsibility for maintaining nor supporting anything in this category.

Question Optimize Embedding YouTube

  • Trony
  • Trony's Avatar Topic Author
  • Offline
  • Junior Member
  • Music and Electronic Devices Designer.
More
3 years 11 months ago - 3 years 11 months ago #1 by Trony
I read this article and so I decided to integrate in Kunena 5.0.3

A Better Method for Embedding YouTube Videos on your Website

First, I putted in Template Css that Style and then I Modded bbcode.php

if ($uri->isSSL())
				{
				$thumbImage = 'HERE URL KUNENA's DEFAULT LOGO FOR EXAMPLE';
				?>
 
                <script>
 
    /* Light YouTube Embeds by @labnol */
    /* Web: https://labnol.org/?p=27941 */
 
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });
 
    function labnolThumb(id) {
        var thumb = '<img src="<?php echo $thumbImage ?>">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }
 
    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?version=3&enablejsapi=1&autohide=2&fs=1&rel=0&hd=1&autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }
 
</script>
                <?
				return '<div class="youtube-player" data-id="'. urlencode($video) .'"></div>';	
				}
				else
				{
				$thumbImage = 'HERE URL KUNENA's DEFAULT LOGO FOR EXAMPLE';
				?>
 
                <script>
 
    /* Light YouTube Embeds by @labnol */
    /* Web: https://labnol.org/?p=27941 */
 
    document.addEventListener("DOMContentLoaded",
        function() {
            var div, n,
                v = document.getElementsByClassName("youtube-player");
            for (n = 0; n < v.length; n++) {
                div = document.createElement("div");
                div.setAttribute("data-id", v[n].dataset.id);
                div.innerHTML = labnolThumb(v[n].dataset.id);
                div.onclick = labnolIframe;
                v[n].appendChild(div);
            }
        });
 
    function labnolThumb(id) {
        var thumb = '<img src="<?php echo $thumbImage ?>">',
            play = '<div class="play"></div>';
        return thumb.replace("ID", id) + play;
    }
 
    function labnolIframe() {
        var iframe = document.createElement("iframe");
        var embed = "https://www.youtube.com/embed/ID?version=3&enablejsapi=1&autohide=2&fs=1&rel=0&hd=1&autoplay=1";
        iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
        iframe.setAttribute("frameborder", "0");
        iframe.setAttribute("allowfullscreen", "1");
        this.parentNode.replaceChild(iframe, this);
    }
 
</script>
                     <?
					return '<div class="youtube-player" data-id="'. urlencode($video) .'"></div>';
				}
			}
		}


I've a Music Community and a My User Posted a Topic with 37 Youtube Videos and I must say that it's work Very Well. (6 seconds for to load the Page.)

Post of my User on my Website

What do you think ?!?

Music and Electronic Devices Designer. Drum and Bass Addict. Creative Mind as Lifestyle. Cat in past Life. Soccer, Ice Hockey and Snowboard Lover.

Last edit: 3 years 11 months ago by Trony.

Please Log in or Create an account to join the conversation.

  • Not Allowed: to create new topic.
  • Not Allowed: to reply.
  • Not Allowed: to edit your message.
Time to create page: 0.126 seconds