Support Offline: Mon - Fri / 08:00am - 05:00pm (GMT +7)
Your Time: Our Time:

file Background Video - Not working as a "Background" in a module position.

More
9 years 1 month ago #8715 by Chris Coen
I saw the "Missing ID" tutorial at the top of the forum group, but I'm not sure I understand the resolution to my problem.

This is what I see:
<div class="moduletable  jmoddiv jux-background-image jmodinside" data-jmodediturl="http://eclipserover.gws-staging.com/index.php?option=com_config&amp;controller=config.display.modules&amp;id=336&amp;return=aHR0cDovL2VjbGlwc2Vyb3Zlci5nd3Mtc3RhZ2luZy5jb20v" data-target="_self" data-jmodtip="<strong>Edit module</strong><br />Video Home Page<br />Position: header-a" id="jux-bgvideo" style="position: relative; min-height: 300px;"><div class="mbYTP_wrapper" id="wrapper_mbYTP_JUXbgndVideo" style="position: absolute; z-index: 0; min-width: 100%; min-height: 100%; left: 0px; top: 0px; overflow: hidden; opacity: 1; transition-property: opacity; transition-duration: 2000ms;"><iframe id="mbYTP_JUXbgndVideo" class="playerBox" style="position: absolute; z-index: 0; width: 1228.4px; height: 612px; top: 0px; left: 0px; overflow: hidden; opacity: 1; margin-top: -156px; margin-left: -159.2px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/UlvJL8zC_Bw?autoplay=0&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=mbYTP_JUXbgndVideo&amp;origin=http%3A%2F%2Feclipserover.gws-staging.com&amp;allowfullscreen=true&amp;wmode=transparent&amp;iv_load_policy=3&amp;html5=1" __idm_id__="595969"></iframe><div class="YTPOverlay" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></div></div>
						<!-- <div id="juxWrapperElement" style="position:absolute;top:0; left:0;width: 100%; height: 100%; background: none;"> -->
<a id="JUXbgndVideo" class="player mb_YTVPlayer" style="display: none; position: relative; background-image: none;">My video</a>
<!-- </div> -->
<div class="jux_videolist jux_playlist_load">
    <div id="jux_playlist" class="owl-carousel owl-theme" style="opacity: 0; display: block;">
                <div class="owl-wrapper-outer"><div class="owl-wrapper" style="width: 26px; left: 0px; display: block; transition: all 0ms ease; transform: translate3d(0px, 0px, 0px);"><div class="owl-item" style="width: 13px;"><button class="sel item jux_btn_video" onclick="jQuery('#JUXbgndVideo').changeMovie({videoURL: 'http://www.youtube.com/watch?v=UlvJL8zC_Bw', startAt:, mute: juxBVMute})" style="background-image:url('http://img.youtube.com/vi/UlvJL8zC_Bw/0.jpg');"><p class="jux_video_title">Eclipse Rover Recording a Custom Car Build</p><div class="video_item_overlay"></div></button></div></div></div>
            <div class="owl-controls clickable" style="display: none;"><div class="owl-pagination"><div class="owl-page"><span class=""></span></div></div></div></div>
    <div class="juxcustomNavigation">
        <span><a href="#" class="jux_prev"></a></span>
        <span><a href="#" class="jux_next"></a></span>
    </div>
    <!-- <button id="btn_playlist" style="float:right;z-index:10001; position:absolute;right:0">Click here</button> -->
</div>
<script>
    var juxBVSetStyle = 1;
    var setSettyle = '<style id="JuxBVFYTPlayer" type="text/css">.jux-background-image{background-image: url(/) !important;                        background-repeat: no-repeat;                        background-size: cover;                        }@media screen and (max-width : 800px){                    body,.jux-background-image{                        background-size: auto 100% !important;                        }                }.body .container{background: none !important;}.mb_YTVPBar .buttonBar {background: none repeat scroll 0 0 rgba(0,0,0, 0);}.mb_YTVPBar:hover .buttonBar {background: none repeat scroll 0 0 rgba(0,0,0, 0.4);}.mb_YTVTime {background: none repeat scroll 0 0 #66a8cc;}.mb_YTVPBar {display:block !important;}</style>';
    var ytPlayListStr = 'UlvJL8zC_Bw';
    var videoStartAt = '';
    var ytVideoPlayListID = ytPlayListStr.split(',');
    var ytVideoStartAt = videoStartAt.split(',');
    var videos = [];
    var juxBVYTFullScreen = false;
    var juxBVAutoplay = true;
    var juxBVMute = false;
    var juxBVVol = 0;
    var juxBVShowControls = false;
    var juxBVShuffleVideos = false;
    var juxBVStopOnBlur = false;
    var juxBVYTQuality = 'default';
    var juxBVYTMinHeight = '300px';
    if (juxBVYTFullScreen) {
        for (var i = 0; i < ytVideoPlayListID.length; i++) {
            videos.push({loop: false, videoURL: ytVideoPlayListID[i], containment: 'body', autoPlay: juxBVAutoplay, mute: juxBVMute, showYTLogo: true, startAt: ytVideoStartAt[i], vol: juxBVVol, showControls: juxBVShowControls, quality: juxBVYTQuality, realfullscreen: juxBVYTFullScreen, stopMovieOnBlur: juxBVStopOnBlur});
        }
    }
    else {
        // Get ID element of position
        var parentPosition = jQuery('#JUXbgndVideo');
        var ppElement = parentPosition.parents();
        var jThisParent = ppElement[0];
        var jThisParentID = jQuery(jThisParent).attr("id");
        console.log(jThisParent);
        if (!jThisParentID) {
            while (!jThisParentID) {
//                ppElement = ppElement.parents();
//                jThisParent = ppElement[0];
                jThisParentID = jQuery(jThisParent).attr("id","jux-bgvideo");
            }
        }

        jQuery(jThisParent).css('position', 'relative');
        jQuery(jThisParent).css('min-height', juxBVYTMinHeight);

        // Set the default for wrapper element that will be appended background video						
        if (!juxBVSetStyle)
        {
            jQuery(jThisParent).css('background', 'none', 'important');
            jQuery(jThisParent).css('background-color', 'rgba(0,0,0,0.50)', 'important');
        }
        jQuery(jThisParent).addClass('jux-background-image');

        for (var i = 0; i < ytVideoPlayListID.length; i++)
        {
            if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
                videos.push({videoURL: ytVideoPlayListID[i], containment: jThisParent, autoPlay: juxBVAutoplay, opacity: 0, mute: juxBVMute, showYTLogo: true, startAt: ytVideoStartAt[i], vol: juxBVVol, showControls: juxBVShowControls, loop: false, quality: juxBVYTQuality, realfullscreen: true, stopMovieOnBlur: juxBVStopOnBlur});
            }
            else {
                videos.push({videoURL: ytVideoPlayListID[i], containment: jThisParent, autoPlay: juxBVAutoplay, mute: juxBVMute, showYTLogo: true, startAt: ytVideoStartAt[i], vol: juxBVVol, showControls: juxBVShowControls, loop: false, quality: juxBVYTQuality, realfullscreen: true, stopMovieOnBlur: juxBVStopOnBlur});
            }
        }

    }

    jQuery(document).ready(function () {
        jQuery('head').append(setSettyle);
    });

    jQuery(document).ready(function ($) {
        $("#JUXbgndVideo").YTPlaylist(videos, juxBVShuffleVideos);
    });

    jQuery("button").not(".command").click(function () {
        jQuery("button").not(".command").removeClass("sel");
        jQuery(this).addClass("sel");
    });
</script>

<script>
    jQuery(document).ready(function ($) {
        var owl = $("#jux_playlist");
        owl.owlCarousel({
            items: 8, //10 items above 1000px browser width
            itemsDesktop: [1000, 5], //5 items between 1000px and 901px
            itemsDesktopSmall: [900, 3], // betweem 900px and 601px
            itemsTablet: [600, 2], //2 items between 600 and 0
            itemsMobile: false // itemsMobile disabled - inherit from itemsTablet option
        });

        // Custom Navigation Events
        $(".jux_next").click(function () {
            owl.trigger('owl.next');
        });
        $(".jux_prev").click(function () {
            owl.trigger('owl.prev');
        });
    });
</script>		</div>
<div class="mbYTP_wrapper" id="wrapper_mbYTP_JUXbgndVideo" style="position: absolute; z-index: 0; min-width: 100%; min-height: 100%; left: 0px; top: 0px; overflow: hidden; opacity: 1; transition-property: opacity; transition-duration: 2000ms;"><iframe id="mbYTP_JUXbgndVideo" class="playerBox" style="position: absolute; z-index: 0; width: 1228.4px; height: 612px; top: 0px; left: 0px; overflow: hidden; opacity: 1; margin-top: -156px; margin-left: -159.2px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/UlvJL8zC_Bw?autoplay=0&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=mbYTP_JUXbgndVideo&amp;origin=http%3A%2F%2Feclipserover.gws-staging.com&amp;allowfullscreen=true&amp;wmode=transparent&amp;iv_load_policy=3&amp;html5=1" __idm_id__="595969"></iframe><div class="YTPOverlay" style="position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;"></div></div>
<iframe id="mbYTP_JUXbgndVideo" class="playerBox" style="position: absolute; z-index: 0; width: 1228.4px; height: 612px; top: 0px; left: 0px; overflow: hidden; opacity: 1; margin-top: -156px; margin-left: -159.2px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="640" height="360" src="https://www.youtube.com/embed/UlvJL8zC_Bw?autoplay=0&amp;modestbranding=1&amp;controls=0&amp;showinfo=0&amp;rel=0&amp;enablejsapi=1&amp;version=3&amp;playerapiid=mbYTP_JUXbgndVideo&amp;origin=http%3A%2F%2Feclipserover.gws-staging.com&amp;allowfullscreen=true&amp;wmode=transparent&amp;iv_load_policy=3&amp;html5=1" __idm_id__="595969"></iframe>

Please advise.

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8731 by GDragon
Hi Chris,
Thanks for contacting us and choosing our product!
Sorry for late response because we just have weekend.
About your problem with jux background video can you pm me your site url and admin account?
I'll check and fix it for you!

Best regards,
--GD--

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8745 by Chris Coen

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8755 by GDragon
Hi Chris,
Thanks for your reply!
I checked your site and see you are using very old version and Youtube upgraded API to v3. So please download latest version and install it. Jux background video will working fine.
The video tutorial you can see here:
docs.joomlaux.com/extensions/jux_bg_video/#video_tutorial
Hope this help!

Best regards,
--GD--

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8757 by Chris Coen
Thank you. It looks like I can only download version 2.0.7

Where can I download the 2.0.8 version?

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8758 by GDragon
Hi,
You can download latest version from here!
www.joomlaux.com/jux-extensions/other/jux-background-video.html
I checked your order and that's seem your order expired. Maybe you need renew your order to download it.

Best regards,
--GD--

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8759 by Chris Coen
Ahh...I thought my versions was still support.

Ok, repurchased, downloaded and installed.

Still not working as a background image loaded in the module.

Thank you,
Chris

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8760 by GDragon
Hi,
I checked your site and that's seem you choose wrong element.
I choose other element and all working fine now. Please check again.
if you like our product please write a review and vote all 100 points for us at:
extensions.joomla.org/extension/jux-background-video
It will help us very much to develop our product! Many thanks!

Best regards,
--GD--

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8761 by Chris Coen
How did you determine it was the #g-header Special Element? I can't see where you find that value.

Thank you for your prompt response!

Please Log in or Create an account to join the conversation.

More
9 years 1 month ago #8762 by GDragon
Hi, As in video tutorial I send you. You can use inspect element of browser to find it!

Best regards,
--GD--

Please Log in or Create an account to join the conversation.

Moderators: Jackie
Time to create page: 0.063 seconds
Powered by Kunena Forum