Private vimeo video with javascript DOM repair for poster frames.


The video is set to play inline in the grid settings. The script looks for iframe tags that don't have a corresponding poster frame DIV and replaces styles, injects DIV and populates with poster frame from the array. Simply add elements to the array in the order they appear in the grid to add a custom poster frame.

Note: This will not work if grid is set to display in lightbox. It also will not show up in your GRID preview. To combat this, I set the alternative link to 'image' and set a feature image when i need to use the preview option in the grid for layout. Then switch it back to 'video' when done arranging.

<script type="text/javascript">

function blc_vimeo_private_posters(){

var posterfrm = [];

posterfrm[0] = "url('https://bcox.hardlyeverwrong.com/wp-content/uploads/2019/12/sh_1-1.jpg')";
posterfrm[1] = "url('https://bcox.hardlyeverwrong.com/wp-content/uploads/2019/12/DMC.jpg')";

var els = document.getElementsByClassName('tg-item-media-inner');
var els_select = [];

for(var i=0; i<els.length; i++){
if (els[i].childNodes.length < 2 && els[i].childNodes[0].nodeName == 'IFRAME') {
els_select.push(els[i]);
	}
}

for(var i=0; i<els_select.length; i++){
    var element = document.createElement("div");
    element.setAttribute('class', 'tg-item-media-poster');
    element.style.backgroundImage = posterfrm[i];
    els_select[i].appendChild(element);
    els_select[i].setAttribute("class", "tg-item-media-inner has-media-poster");
	}

}

window.onload=blc_vimeo_private_posters();

</script>

CSS for making the grid ignore aspect ratio. I set my videos to 16:10 for square videos then target that size to make a 1:1 grid element:

.tg-layout-masonry .tg-item-media-inner[data-ratio *= "16:10"] {
    padding-bottom: 100% !important;
}
GLOBAL CSS

.requestaccesssubmit input[type=submit] {
    padding:15px 45px; 
}

.tg-layout-masonry .tg-item-media-inner[data-ratio *= "16:10"] {
    padding-bottom: 100% !important;
}


.blc_hideme {
   display: none;
}

.blc_transp {
background-color: transparent !important;
border: none !important;
box-shadow: 0px 0px !important;

}