WP YouTube Lyte with Modal showing grey box

that would typically happen when WP YouTube Lyte’s JS isn’t running (or isn’t running correctly) Lineone. is the JS visible in the page HTML? do you get errors in your browser console?

frank

I don’t see any errors in the browser console.

The .js file seems to be included:

<script type="text/javascript" async src="https://www.example.de/kk/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js?wyl_version=1.6.0"></script>

Thanks for your help.

but there should also be inline JS, do you see that?

Yes. That is also present and looks correct.

<script type="text/javascript">var bU='https://www.example.de/kk/wp-content/plugins/wp-youtube-lyte/lyte/';var mOs=navigator.userAgent.match(/(iphone|ipad|ipod|android)/i);style = document.createElement('style');style.type = 'text/css';rules = document.createTextNode(".lyte-wrapper-audio div, .lyte-wrapper div {margin:0px; overflow:hidden;} .lyte,.lyMe{position:relative;padding-bottom:56.25%;height:0;overflow:hidden;background-color:#777;} .fourthree .lyMe, .fourthree .lyte {padding-bottom:75%;} .lidget{margin-bottom:5px;} .lidget .lyte, .widget .lyMe {padding-bottom:0!important;height:100%!important;} .lyte-wrapper-audio .lyte{height:38px!important;overflow:hidden;padding:0!important} .lyMe iframe, .lyte iframe,.lyte .pL{position:absolute !important;top:0;left:0;width:100%;height:100%!important;background:no-repeat scroll center #000;background-size:cover;cursor:pointer} .tC{left:0;position:absolute;top:0;width:100%} .tC{background-image:linear-gradient(to bottom,rgba(0,0,0,0.6),rgba(0,0,0,0))} .tT{color:#FFF;font-family:Roboto,sans-serif;font-size:16px;height:auto;text-align:left;padding:5px 10px 50px 10px} .play{background:no-repeat scroll 0 0 transparent;width:88px;height:63px;position:absolute;left:43%;left:calc(50% - 44px);left:-webkit-calc(50% - 44px);top:38%;top:calc(50% - 31px);top:-webkit-calc(50% - 31px);} .widget .play {top:30%;top:calc(45% - 31px);top:-webkit-calc(45% - 31px);transform:scale(0.6);-webkit-transform:scale(0.6);-ms-transform:scale(0.6);} .lyte:hover .play{background-position:0 -65px;} .lyte-audio .pL{max-height:38px!important} .lyte-audio iframe{height:438px!important} .ctrl{background:repeat scroll 0 -220px rgba(0,0,0,0.3);width:100%;height:40px;bottom:0px;left:0;position:absolute;} .lyte-wrapper .ctrl{display:none}.Lctrl{background:no-repeat scroll 0 -137px transparent;width:158px;height:40px;bottom:0;left:0;position:absolute} .Rctrl{background:no-repeat scroll -42px -179px transparent;width:117px;height:40px;bottom:0;right:0;position:absolute;padding-right:10px;}.lyte-audio .play{display:none}.lyte-audio .ctrl{background-color:rgba(0,0,0,1)}.hidden{display:none}" );if(style.styleSheet) { style.styleSheet.cssText = rules.nodeValue;} else {style.appendChild(rules);}document.getElementsByTagName('head')[0].appendChild(style);</script>

Hmmm, I think it’s time to share your URL ??

OK Boss. URL

ok, the trick is to call ly.te() right after the modal has opened.

Thanks Frank.

I’ll give that a try and let you know how I get on.

Well Frank that did the trick.

The relevant code is as follows:

PHP
$vid_content = do_shortcode( '[lyte id="' . $videoId . '" /]' );

Javascript

jQuery('a.vid-" . $i . "').click(function(e){
	modal.open({content: '" . $vid_content . "'});
	ly.te();
	e.preventDefault();
});

Thanks Frank. Solved!

Solved.

great! ??