You can add a pretty rad "sticky" functionality (aka Picture in Picture functionality) to your Vidalytics videos. 

What this will do is make your videos 'pop out' and stick to the corner of your page as you scroll down in it.

<div id="vidalytics_player_placeholder">
<div id="vidalytics_player_wrapper">
<span id="vidalytics_player_wrapper_disable_pip">×</span>
<!-- start of embed code -->
<div id="vidalytics_embed_YOUR-EMBED" style="width: 100%; position:relative; padding-top: 56.25%;"></div>
<script type="text/javascript">
(function (v, i, d, a, l, y, t, c, s) {
    y='_'+d.toLowerCase();c=d+'L';if(!v[d]){v[d]={};}if(!v[c]){v[c]={};}if(!v[y]){v[y]={};}var vl='Loader',vli=v[y][vl],vsl=v[c][vl + 'Script'],vlf=v[c][vl + 'Loaded'],ve='Embed';
    if (!vsl){vsl=function(u,cb){
        if(t){cb();return;}s=i.createElement("script");s.type="text/javascript";s.async=1;s.src=u;
        if(s.readyState){s.onreadystatechange=function(){if(s.readyState==="loaded"||s.readyState=="complete"){s.onreadystatechange=null;vlf=1;cb();}};}else{s.onload=function(){vlf=1;cb();};}
        i.getElementsByTagName("head")[0].appendChild(s);
    };}
    vsl(l+'loader.min.js',function(){if(!vli){var vlc=v[c][vl];vli=new vlc();}vli.loadScript(l+'player.min.js',function(){var vec=v[d][ve];t=new vec();t.run(a);});});
})(window, document, 'Vidalytics', 'vidalytics_embed_YOUR-EMBED', 'https://quick.vidalytics.com/embeds/YOUR-ID/YOUR-EMBED/');
</script>
<!-- end of embed code -->
</div>
</div>

<script>
function vidalyticsPlayerOnScroll() {
var vidalyticsPlayerWrapper = document.getElementById('vidalytics_player_wrapper');
var vidalyticsPlayerPlaceholder = document.getElementById('vidalytics_player_placeholder');
var lowerEdge = vidalyticsPlayerPlaceholder.offsetTop + vidalyticsPlayerWrapper.clientHeight;
var switchToMinPlayerPos = lowerEdge;
var currentScrollPos = document.body.scrollTop || document.documentElement.scrollTop;

if (currentScrollPos > switchToMinPlayerPos) {
vidalyticsPlayerPIPEnable();
} else {
vidalyticsPlayerPIPDisable();
}
}

function vidalyticsPlayerPIPEnable() {
var vidalyticsPlayerWrapper = document.getElementById('vidalytics_player_wrapper');
if (!vidalyticsPlayerWrapper.classList.contains('fixed')) {
vidalyticsPlayerWrapper.classList.add('fixed');
}
}

function vidalyticsPlayerPIPDisable() {
var vidalyticsPlayerWrapper = document.getElementById('vidalytics_player_wrapper');
if (vidalyticsPlayerWrapper.classList.contains('fixed')) {
vidalyticsPlayerWrapper.classList.remove('fixed');
}
}

function vidalyticsPlayerOnScrollCallback() {
clearTimeout(vidalyticsPlayerOnScrollTimeout);
vidalyticsPlayerOnScrollTimeout = setTimeout(vidalyticsPlayerOnScroll, 50);
}

var vidalyticsPlayerOnScrollTimeout = null;

window.addEventListener('scroll', vidalyticsPlayerOnScrollCallback);

document.getElementById('vidalytics_player_wrapper_disable_pip').addEventListener('click', function () {
window.removeEventListener('scroll', vidalyticsPlayerOnScrollCallback);
vidalyticsPlayerPIPDisable();
});

/* listen to scrolling events */
</script>

<style>
#vidalytics_player_placeholder {
background: #ccc;
display: block;
}

#vidalytics_player_wrapper {
background: transparent;
position: relative;
}

#vidalytics_player_wrapper.fixed {
position: fixed;
top: 20px;
left: 20px;
width: 30%;
max-width: 450px;
height: auto;
z-index: 9998;
}

#vidalytics_player_wrapper_disable_pip {
display: none;
width: 30px;
height: 30px;
border-radius: 15px;
background: #000;
color: #fff;
text-align: center;
line-height: 26px;
position: absolute;
top: -15px;
left: -15px;
font-size: 23px;
font-weight: bold;
font-family: Helvetica, Arial, sans-serif;
z-index: 9999;
border: 2px #fff solid;
cursor: pointer;
}

#vidalytics_player_wrapper.fixed #vidalytics_player_wrapper_disable_pip {
display: block;
}
</style>

To make it super clear, you have to:

  • add the embed code with wrappers in HTML (like any other embed code)
  • js functions (the code between <script></script>) in a <script> tag.
  • css code (the code between <style></style>) in a <style> tag

If something does not work, then review all elements corresponding to the embed code placeholder and check their CSS "position" and "z-index" settings. It would also be good to check for console errors to debug ;) 

Did this answer your question?