Adobe Experience Manager Sites & More

kdatta21 · 1/12/17

Hi All ,

I am new to AEM so just trying to make few components.I made a component and add a dialog to it to fetch the You tube url to be shown in the page.
I am successful in fetching the data from URL and also able to manipulate it but can't able to send that data into js file which will take up the you video.I am providing the code .Please have a look and guide.
My component.

<%@include file="/libs/foundation/global.jsp"%>
<script src="https://www.youtube.com/iframe_api"></script>
<%@ page import="com.day.cq.dam.api.Asset,
                   com.day.cq.wcm.api.WCMMode,
                   com.day.cq.wcm.api.components.DropTarget,
                   com.day.cq.wcm.foundation.Placeholder,
                   org.apache.jackrabbit.commons.JcrUtils"%>
<html>
<%@ page import="java.util.*"%>
<script type="text/javascript" src="/apps/aemfirstproject/components/page/youtubevideocomponent/clientlibs/youtubeapi.js"></script>
<body>

<cq:includeClientLib categories="JSSamples" />
<%
String vpath=properties.get("videopath","");

   String a="";
   String b="";
   StringTokenizer st=new StringTokenizer(vpath,"=");
while(st.hasMoreTokens()){
a=st.nextToken();
b=st.nextToken();

}
%>
<input type="hidden" id="uri" value="<%=b%>">

</body>
</html>

JS file

var player;
var a=document.getElementById('uri').value;
alert("a");
function onYouTubeIframeAPIReady() {
    player = new YT.Player('video-placeholder', {
        width: 600,
        height: 400,
        videoId: 'a',
        alert("videoId");
        playerVars: {
            color: 'white',
            playlist: ''
        },
        events: {
            onReady: initialize
        }
    });
}
function initialize(){

    // Update the controls on load
    updateTimerDisplay();
    updateProgressBar();

// Clear any old interval.
clearInterval(time_update_interval);

    // Start interval to update elapsed time display and
    // the elapsed part of the progress bar every second.
    time_update_interval = setInterval(function () {
        updateTimerDisplay();
        updateProgressBar();
    }, 1000)

}
// This function is called by initialize()
function updateTimerDisplay(){
    // Update current time text display.
    $('#current-time').text(formatTime( player.getCurrentTime() ));
    $('#duration').text(formatTime( player.getDuration() ));
}

function formatTime(time){
time = Math.round(time);

var minutes = Math.floor(time / 60),
seconds = time - minutes * 60;

seconds = seconds < 10 ? '0' + seconds : seconds;

return minutes + ":" + seconds;
}
$('#progress-bar').on('mouseup touchend', function (e) {

    // Calculate the new time for the video.
    // new time in seconds = total duration in seconds * ( value of range input / 100 )
    var newTime = player.getDuration() * (e.target.value / 100);

// Skip video to new time.
player.seekTo(newTime);

});
// This function is called by initialize()
function updateProgressBar(){
    // Update the value of our progress bar accordingly.
    $('#progress-bar').val((player.getCurrentTime() / player.getDuration()) * 100);
}
$('#play').on('click', function () {
    player.playVideo();
});

$('#pause').on('click', function () {
player.pauseVideo();
});
$('#mute-toggle').on('click', function() {
var mute_toggle = $(this);

    if(player.isMuted()){
        player.unMute();
        mute_toggle.text('volume_up');
    }
    else{
        player.mute();
        mute_toggle.text('volume_off');
    }
});
$('#volume-input').on('change', function () {
    player.setVolume($(this).val());
});
$('#quality').on('change', function () {
    player.setPlaybackQuality($(this).val());
});
$('#next').on('click', function () {
    player.nextVideo()
});

$('#prev').on('click', function () {
player.previousVideo()
});
$('.thumbnail').on('click', function () {

var url = $(this).attr('data-video-id');

player.cueVideoById(url);

});

Thanks in advance !!

kautuk_sahni · 1/13/17

Login to CRXDELite.
Navigate to the directory stucure we have created earlier.
Go inside the Component folder.
Right-click and select Create Component.
Enter the following:
Label: youtube
Title: DisplayYouTube
Description: This component is used to display the YouTube video
Group: AEM Company
Click Next and Next.
Enter Allowed Parent as */parsys
Click Next and Click OK.
Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
Add the following code:
```
<div style="overflow: hidden;"> <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe> </div>
```
(I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)
Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
Right click YouTube, select Create > Create Dialog.
Enter title as YouTube and select OK.

The component is created now. Let us enable it.

Open the web page you created.
Go to the Design View.
Enable the Component Group; that is, AEM Company.
Go to the Edit view.
From the component group, drag and drop the component to your page.
See the way YouTube video appears.

~kautuk

Kautuk Sahni

View solution in original post

kautuk_sahni · 1/13/17

Pleas have a look at this bolg post :- http://blogs.adobe.com/sunil/2015/07/10/create-your-first-sightly-component/

//Create your first Sightly component (YouTube component !!!)

Video Link:- https://youtu.be/85CTsguW3fY

I hope this would help you.

~kautuk

Kautuk Sahni

kautuk_sahni · 1/13/17

Login to CRXDELite.
Navigate to the directory stucure we have created earlier.
Go inside the Component folder.
Right-click and select Create Component.
Enter the following:
Label: youtube
Title: DisplayYouTube
Description: This component is used to display the YouTube video
Group: AEM Company
Click Next and Next.
Enter Allowed Parent as */parsys
Click Next and Click OK.
Now, rename youtube.jsp to youtube.html. (By deafault, CRXDELite creates a JSP component. I have mentioned earlier that we will create the component using Sightly. That’s why we renamed the extension to html.)
Add the following code:
```
<div style="overflow: hidden;"> <iframe width="600" height="510" src="https://www.youtube.com/embed/dI1yi2mmNuo" frameborder="0" allowfullscreen></iframe> </div>
```
(I have taken the embedded code directly from YouTube. Then changed the width and height. I wrapped it around a div element and added the overflow attribute to remove extra space.)
Create a dialog now. We are not going to do anything with the dialog. However, it’s needed for a newly created component to appear in the sidekick.
Right click YouTube, select Create > Create Dialog.
Enter title as YouTube and select OK.

The component is created now. Let us enable it.

Open the web page you created.
Go to the Design View.
Enable the Component Group; that is, AEM Company.
Go to the Edit view.
From the component group, drag and drop the component to your page.
See the way YouTube video appears.

~kautuk

Kautuk Sahni

kdatta21 · 1/13/17

Hi Kautuk ,

Thanks for your valuable reply.It helped me a lot in understanding the concept.But there is slight change in my requirement .I want that author should provide the you tube URL in dialog box and that url will be processed. I have created the dialog box and provided the text box for youtube url to provide. I have rendered that URL in my JSP page and converted that url into embeded url as you mentioned.Below is the code :

<%@include file="/libs/foundation/global.jsp"%>

<%@ page import="java.util.*"%>

<%
   String vpath=properties.get("videopath","");
   String a="";
   String b="";
   StringTokenizer st=new StringTokenizer(vpath,"=");
   while(st.hasMoreTokens()){
   a=st.nextToken();
   b=st.nextToken();
    }
String url="https://www.youtube.com/embed/"+b;
%>
<%=b%>

<%=url%>// for seeing the url is embedded or not(working fine)
<div style="overflow: hidden;">
<iframe width="560" height="315" src='url' frameborder="0" allowfullscreen></iframe>
</div>

But in the html page there is one error showing "A custom errorhandler for 404 responses".
Can you please help me out of this.

Kind regards,

kdatta

Mayur_1 · 4/10/18

@@

Mayur_1 · 4/10/18

You can refer below link, that has reference of Creating an Experience Manager YouTube Component

https://helpx.adobe.com/experience-manager/using/aem63_htl_youtube.html

Adobe Experience Manager Sites & More

Making a component that shows you tube video.

Kautuk Sahni

Kautuk Sahni

Kautuk Sahni

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe