Thursday, 15 December 2016

Replay XPages Webinar - Marty, You're Just Not Thinking Fourth Dimensionally

On December 13th a very interesting webinar was organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. For those who missed this webinar below the content, slides and video.

Content Webinar
When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaScript or scoped variables, understanding what's really there when your code wants it is key troubleshooting XPages. In this webinar Paul Withers will help you think fourth dimensionally to better pre-empt the outcomes and troubleshoot when things don't work out like you expect. You'll realise whether or not the bridge over Clayton...Shonash Ravine will be there to ensure your XPages make it Back to the Future.



Second Time IBM Champion for Collaboration Solutions (ICS)!

Yesterday IBM announced the IBM 2017 Champions for Collaboration Solutions (ICS). For a complete overview of all IBM Champions see the IBM Announcement, Introducing the 2017 IBM Champions for ICS!
My sincere congratulations to all IBM Champions ICS 2017! I would also like to thank everyone who nominated me for IBM Champion 2017. Thank you very much!
This year I was selected for the second time as IBM Champion for Collaboration Solutions. Thank you IBM! I am humbled and grateful to be belong to this special group of IBM Champions for Collaboration Solutions.



Monday, 12 December 2016

XPages Webinar: Marty, You're Just Not Thinking Fourth Dimensionally

Tomorrow a very interesting webinar will be organized by T.L.C.C and Team Studio, Marty, You're Just Not Thinking Fourth Dimensionally by IBM Champion Paul Withers. The registration for this webinar is available on the T.L.C.C website.


Content Webinar
When XPages code doesn't work as expected it is often because the expectation was wrong. With the various phases of the XPages lifecycle, validation, the various event handler settings, embedding Server-Side JavaScript within Client-Side JavaScript or scoped variables, understanding what's really there when your code wants it is key troubleshooting XPages.
In this webinar Paul Withers will help you think fourth dimensionally to better pre-empt the outcomes and troubleshoot when things don't work out like you expect. You'll realise whether or not the bridge over Clayton...Shonash Ravine will be there to ensure your XPages make it Back to the Future.

For more information: XPages Webinar Series with TLCC and Teamstudio.

Missed a Webinar? Look here for the recorded webinars.
Below a recording of the webinar from November 3rd, The Future of Notes and Domino from IBM and the Webinar XPages and jQuery DataTables: Simplifying View Creation while Maximizing Functionality.



Friday, 9 December 2016

Quick XPages Tip: Responsive Videos using the YouTube IFrame Player API and CSS in XPages


This past week I was asked to embed a video on a XPages in which the sound had to be muted when the XPages was opened and the video played automatically. Given the default option 'volume = 0' no longer works in case an iframe is used (see example below), I decided to use the YouTube IFrame Player API including a CSS file in this specific case. Below an example of the use of the YouTube IFrame Player API in a XPage.

<div class="video-container">
<iframe id="video" width="560" height="315" src="https://www.youtube.com/embed/PYpD7H3lNGA?autoplay=1;controls=0;loop=1;showinfo=0;volume=0;playlist=PYpD7H3lNGA"
frameborder="0" allowfullscreen="">
</iframe>
</div>

Basic setup YouTube IFrame Player API with some additional options
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('video1', {
videoId: 'PYpD7H3lNGA', // YouTube Video ID
playerVars: {
autoplay: 1,  // Auto-play the video on load
controls: 0,  // Show pause/play buttons in player
showinfo: 0,  // Hide the video title
modestbranding: 0,  // Hide the Youtube Logo
loop: 1,   // Run the video in a loop
fs: 0,  // Hide the full screen button
cc_load_policy: 0,  // Hide closed captions
iv_load_policy: 3,  // Hide the Video Annotations
autohide: 0,   // Hide video controls when playing
playlist: 'PYpD7H3lNGA'
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>

Example YouTube IFrame Player API in an XPage
<?xml version="1.0" encoding="UTF-8"?>
<xp:view xmlns:xp="http://www.ibm.com/xsp/core"
xmlns:xc="http://www.ibm.com/xsp/custom">
<xp:this.resources>
<xp:styleSheet href="/print.css" media="print"></xp:styleSheet>
<xp:styleSheet href="/video.css"></xp:styleSheet>
</xp:this.resources>
<xc:ccLayout><xp:this.facets>
<xp:panel xp:key="facetMiddle">
<div id="video-container">
<div id="video1"></div>
</div>
<script src="https://www.youtube.com/iframe_api"></script>
<script>
function onYouTubeIframeAPIReady() {
var player;
player = new YT.Player('video1', {
videoId: 'PYpD7H3lNGA', // YouTube Video ID
playerVars: {
autoplay: 1,
controls: 0,
showinfo: 0,
modestbranding: 0,
loop: 1,
fs: 0,
cc_load_policy: 0,
iv_load_policy: 3,
autohide: 0,
playlist: 'PYpD7H3lNGA'
},
events: {
onReady: function(e) {
e.target.mute();
}
}
});
}
</script>
</xp:panel>
</xp:this.facets>
</xc:ccLayout>
</xp:view>

Corresponding CSS file for responsiveness
.video-container {
 position:relative;
 padding-bottom:56.25%; /* 16:9 */
 padding-top:30px;
 height:0;
 overflow:hidden;
}

.video-container iframe, .video-container object, .video-container embed {
 position:absolute;
 top:0;
 left:0;
 width:100% !important;
 height:100% !important;
}

Final result is a responsive video using the YouTube IFrame API Player.
More information YouTube IFrame API Player.