Created
June 7, 2019 22:22
-
-
Save bkinseyx/4afea3bce38ff53ea453d06a1c706a90 to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<script src="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.1.2/jquery.bxslider.min.js"></script> | |
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bxslider/4.1.2/jquery.bxslider.css" /> | |
<script> | |
// this part of the code should probably be moved to theme | |
// it is written like this instead of script tag based on youtube api docs | |
// the idea is to make it asynchronous (not blocking) | |
var tag = document.createElement('script'); | |
tag.src = 'https://www.youtube.com/iframe_api'; | |
var firstScriptTag = document.getElementsByTagName('script')[0]; | |
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); | |
// global vars | |
var sliderVideoIds = []; | |
var sliderPlayers = []; | |
var bxSlider; | |
</script> | |
<style> | |
.outer-slide-wrapper { | |
height: 375px; | |
} | |
.inner-slide-wrapper { | |
position: relative; | |
height: 345px; | |
} | |
.fill-all-space { | |
position: absolute; | |
top: 0; | |
left: 0; | |
right: 0; | |
bottom: 0; | |
} | |
.caption-wrapper { | |
display: flex; | |
padding: 30px; | |
pointer-events: none; | |
} | |
.caption { | |
width: 300px; | |
z-index: 2; | |
} | |
.caption h2 { | |
color: inherit !important; | |
} | |
.button-position-left { | |
text-align: left; | |
} | |
.button-position-right { | |
text-align: right; | |
} | |
.caption button { | |
border: none; | |
border-radius: 5px; | |
text-decoration: none !important; | |
pointer-events: auto; | |
} | |
.slider-youtube-video { | |
pointer-events: auto; | |
} | |
.position-center-top { | |
align-items: flex-start; | |
justify-content: center; | |
} | |
.position-center-bottom { | |
align-items: flex-end; | |
justify-content: center; | |
} | |
.position-right-top { | |
align-items: flex-start; | |
justify-content: flex-end; | |
} | |
.position-right-middle { | |
align-items: center; | |
justify-content: flex-end; | |
} | |
.position-right-bottom { | |
align-items: flex-end; | |
justify-content: flex-end; | |
} | |
.position-left-top { | |
align-items: flex-start; | |
justify-content: flex-start; | |
} | |
.position-left-bottom { | |
align-items: flex-end; | |
justify-content: flex-start; | |
} | |
.position-left-middle { | |
align-items: center; | |
justify-content: flex-start; | |
} | |
</style> | |
<#if entries?has_content> | |
<div class="bx-slider"> | |
<#list entries as curEntry> | |
<#assign | |
assetRenderer = curEntry.getAssetRenderer() | |
journalArticle = assetRenderer.getAssetObject() | |
/> | |
<div class="outer-slide-wrapper"> | |
<div class="inner-slide-wrapper"> | |
<@liferay_journal["journal-article"] | |
articleId=journalArticle.getArticleId() | |
ddmTemplateKey=journalArticle.getDDMTemplateKey() | |
groupId=journalArticle.getGroupId() | |
/> | |
</div> | |
</div> | |
</#list> | |
</div> | |
</#if> | |
<script> | |
function initPlayer(id) { | |
var player = new YT.Player('player_' + id, { | |
height: "100%", | |
width: "100%", | |
playerVars: {rel: 0}, | |
events: { | |
'onStateChange': function(state) { | |
// 1 means video has started playing | |
if (state.data === 1) { | |
$('.caption-wrapper').hide(); | |
} else { | |
$('.caption-wrapper').show(); | |
} | |
// we could consider turning auto sliding back on when video is done. | |
bxSlider.stopAuto(); | |
} | |
} | |
}); | |
return player; | |
} | |
function initSlider() { | |
bxSlider = $('.bx-slider').bxSlider({ | |
auto: true, | |
pause: 6000, | |
controls: false, | |
touchEnabled: false, | |
stopAutoOnClick: true, | |
onSlideBefore: function($slideElement, oldIndex, newIndex){ | |
// pause the video when you change slides | |
$('.slider-youtube-video').each(function(){ | |
this.contentWindow.postMessage('{"event":"command","func":"' + 'pauseVideo' + '","args":""}', '*') | |
}); | |
} | |
}); | |
} | |
function onYouTubeIframeAPIReady() { | |
sliderPlayers = []; | |
sliderPlayers = sliderVideoIds.map(initPlayer); | |
initSlider(); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment