Support » Plugins and Hacks » WP YouTube Lyte » WP YouTube Lyte with Modal showing grey box

  • Resolved Lineone

    (@lineone)


    Hi Frank,

    I’m trying to show videos in a simple modal. It shows the video title at the top as expected but only a grey box where the video should be.

    This is an example of the source:

    <div id="modal" style="width: auto; height: auto; top: 2286px; left: 288px;"><div id="content"><div class="lyte-wrapper fourthree" style="width:480px;max-width: 100%;margin:5px auto;"><div class="lyMe" id="WYL_xenHjnC8LGQ" itemprop="video" itemscope="" itemtype="http://schema.org/VideoObject"><meta itemprop="thumbnailUrl" content="https://i.ytimg.com/vi/xenHjnC8LGQ/hqdefault.jpg"><meta itemprop="embedURL" content="http://www.youtube.com/embed/xenHjnC8LGQ"><meta itemprop="uploadDate" content="2016-06-26T13:10:24.000Z"><div id="lyte_xenHjnC8LGQ" data-src="https://i.ytimg.com/vi/xenHjnC8LGQ/hqdefault.jpg" class="pL" style="
    "><div class="tC"><div class="tT" itemprop="name">TRAVEL VLOG | NYC WITH MOM!</div></div><div class="play"></div><div class="ctrl"><div class="Lctrl"></div><div class="Rctrl"></div></div></div><noscript><a href="http://youtu.be/xenHjnC8LGQ"><img src="http://i.ytimg.com/vi/xenHjnC8LGQ/0.jpg" alt="" width="480" height="340" /><br />Watch this video on YouTube</a></noscript><meta itemprop="description" content="Thank you for watching"></div></div><div class="lL" style="max-width:100%;width:480px;margin:5px auto;"></div></div><a id="close" href="#">close</a></div>

    I can provide a link to the page if that would be needed. Here is a screen cap: https://ibin.co/2noC8gni3duU.png

    Can you tell me what could be causing this?

    Many thanks.

    https://wordpress.org/plugins/wp-youtube-lyte/

Viewing 11 replies - 1 through 11 (of 11 total)
  • Plugin Author Frank Goossens

    (@futtta)


    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="http://www.example.de/kk/wp-content/plugins/wp-youtube-lyte/lyte/lyte-min.js?wyl_version=1.6.0"></script>

    Thanks for your help.

    Plugin Author Frank Goossens

    (@futtta)


    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='http://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>

    Plugin Author Frank Goossens

    (@futtta)


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

    OK Boss. URL

    Plugin Author Frank Goossens

    (@futtta)


    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.

    Plugin Author Frank Goossens

    (@futtta)


    great! 🙂

Viewing 11 replies - 1 through 11 (of 11 total)
  • You must be logged in to reply to this topic.