#1
  1. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2

    Video on Image Inside Slider


    Okay, unfortunately, I can't give you my website because it's on an internal stage server.

    Having said that, here's my issue.

    I'm adding content to a simple javascript slider. The images on slides 1,3, and 4 are perfect. The issue is slide 2. Slide 2 includes a video. There's an image as a background on this slide, but there's a video on the left side of it.
    Screenshot of How it SHOULD look.
    Screenshot of How it CURRENTLY looks.

    It's been difficult to place everything with CSS since it's all within the confines of a slider that's already affected by javascript.

    Also, the slider is on autoplay to change every 3-5 seconds. How do I make it so that the slider stops autoplaying if somebody clicks on the video? This way the video can finish playing before it goes to the next slide...

    The last issue I have is that when it DOES switch to the next slide, the video hangs out for just a moment until the animation is complete. In other words, the fade animation between slides doesn't affect the video and it stays until it's fully on the next slide...


    Any thoughts anyone might have would be very helpful... Thanks!

    Here's the JS from the slider:
    Code:
    <script type='text/javascript'>
        jQuery('#slider-1').cycle({
            next: '#next-1',
            prev: '#prev-1',
            fx: 'fade',
            timeout: 30000000,
            pause: 1,
            pager: '#slider-nav-pager-1',
            height: '433px',
            width: '960px'
        })
    </script>
    Here's the CSS:
    Code:
    .slide-video {
    	width: 930px;
    	background: url('images/Slide2.jpg') no-repeat;
    }
    .slide-video-desc {
           width: 930px;
    	top: -1%;
           position: relative;
           background: url('images/slider-desc-bg.png') no-repeat;
    	overflow: hidden;
    	background-size:960px 85px;
    	height: 85px;
    	font-family: 'tradegothic';
    	font-size: 22px;
    	color: #F8F8F8;
    	text-align: left;
    	padding-bottom: 150px;
           line-height: .4em;
    }
    .slide-video-button {
    	    background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1;
        background-size: 100% 100%;
        border-radius: 6px 6px 6px 6px;
        bottom: 45px;
        color: black;
        font-family: 'platin';
        font-size: 18px;
        height: 45px;
        padding-right: 40px;
    	padding-left: 15px;
    	float: right;
        position: relative;
    	text-decoration: none;
    	line-height: 2.5em;
    	right: 10px;
    }
    
    /*Slider Description*/
    .slide-desc {
        margin-top: -90px;
        width: 930px;
        padding: 5px 25px;
        position: relative;
        background: url('images/slider-desc-bg.png') no-repeat;
    	overflow: hidden;
    	background-size:960px 85px;
    	height: 85px;
    	font-family: 'tradegothic';
    	font-size: 22px;
    	color: #F8F8F8;
    	z-index: 2000;
    	text-align: left;
    }
    .slide {
    	font-famliy: 'tradegothic';
    }
    /*Slide Title*/
    .slide .slide-desc h2{
    	color:  #F8F8F8;
    	font-size:40px;
    	margin: 5px 0 5px -5px;
    	line-height: 0.7em;
    	font-family: 'platin';
           text-shadow:3px 3px 7px #181818;
    }
    /*Slide Button*/
    .demo-button {
        background: url("images/Whole_Button.png") no-repeat scroll left center #D1D1D1;
        background-size: 100% 100%;
        border-radius: 6px 6px 6px 6px;
        bottom: 17px;
        color: black;
        font-family: 'platin';
        font-size: 18px;
        height: 45px;
        padding-right: 40px;
    	padding-left: 15px;
    	float: right;
        position: relative;
    	text-decoration: none;
    	line-height: 2.5em;
    	right: 10px;
    }
    .demo-button a:hover {
        text-decoration: none;
    }
    
    .demo-button a:hover span {
        text-decoration: none;
    }
    .button-text {
    	padding-left: 50px; 
    	padding-right: -10px;
    }
    a:link {
       text-decoration: none;
    }
    .slider{
    	margin: 0 auto;
        padding-top: 15px;
    }
    .entry-content .shadow-wrap {
        margin: 0 auto;
        padding-left: 15px;
        padding-top: 10px;
        width: 1000px;
    }
    #slider-1 .slide img {
        width: 960px;
        max-width: 100%;
        padding-top: 15px;
    }
    
    #slider-1 .slide-desc img {
        width: auto;
    }
    /*Slogan*/
    .slide-header {
        color: #D1D1D1;
        font-family: 'tradegothic';
        font-size: 18px;
        padding: 5px 0 15px;
        text-align: left;
        padding-top: 10px;
    }
    #slider-nav-1 {
        bottom: 8px;
        margin: 0 auto;
        position: relative;
        width: 170px;
    }
    #slider-nav-pager-1 a{
    	background: url('images/unused.png') no-repeat;
    	padding: 2px 5px;
    	color: transparent;
    	margin: 0 4px;
    }
    #slider-nav-pager-1 .activeSlide{
    	background: url('images/current.png') no-repeat;
    }
    #slider-nav-1 #next-1 {
    	float:right;
    	margin-left: 3px;
    }
    #slider-nav-1 #prev-1 {
    	float:right;
    	margin-right: 3px;
    }
    #slider-nav-1 #slider-nav-pager-1 {
    	float:right;
    }
    Here's the html:
    Code:
    <div class='slider' id='slider-1'>
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide1.jpg" alt="Slide 1" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Our Mission</h2>
    Innovating smarter solutions for building and preserving success. 
    <a class="demo-button" title="Our Mission" href="https://www.cleantelligent.com/tour/"><span class="button-text">Take the Tour</span></a>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <div class="slide-video">
    <iframe width="530" height="300" src="//www.youtube.com/embed/fa14mM1Zjhw" frameborder="0" allowfullscreen></iframe>
    <div class="slide-video-desc">
    <img src="images/slider-desc-bg.png">
    <h2 style="font-size: 40px; font-family: 'platin'; color: #F8F8F8;">Why CleanTelligent?</h2>
    Find out why hundreds of BSC's and Facility Managers love CleanTelligent.
    <div class="slide-video-button"><a title="Why CleanTelligent?" href="https://www.cleantelligent.com/benefits"><span class="button-text">Explore Benefits</span></a></div>
    
    </div>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide3.jpg" alt="Slide 3" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Request a Demo</h2>
    Schedule a free, one-on-one web demo with one of our software consultants.<a class="demo-button" title="Request a Demo" href="https://www.cleantelligent.com/get-started/"><span class="button-text">Request a Demo</span></a>
    
    </div></div>
    
    <div class='slide'><div class='slide-header'>CleanTelligent is quality control software trusted to help build and preserve relationships.</div>
    <img src="/wp-content/themes/cleantelligent/images/Slide4.jpg" alt="Slide 4" />
    <div class='slide-desc'>
    <h2 style="font-family: 'platin';">Bidding and Estimating Module</h2>
    Increase revenus and successfully retain clients with impactful proposals.<a class="demo-button" title="Bidding and Estimating" href="https://www.cleantelligent.com/bidding-and-estimating-software/"><span class="button-text">More Information</span></a>
    
    </div></div>
    
    </div>
    
    <!--END OF SLIDER CONTENT-->
    
    <div class='shadow-wrap'><img class='shadow' alt="Slider Shadow" src='/wp-content/themes/cleantelligent/images/slider-shadow.png' /></div>
    <div id='slider-nav-1'>
    <a href="#" id="next-1"><img src='/wp-content/themes/cleantelligent/images/next.png' alt='next' /></a>
    <div id='slider-nav-pager-1'></div>
    <a href="#" id="prev-1"><img src='/wp-content/themes/cleantelligent/images/prev.png' alt='previous' /></a>
    </div>
    <script type='text/javascript'>
        jQuery('#slider-1').cycle({
            next: '#next-1',
            prev: '#prev-1',
            fx: 'fade',
            timeout: 50000,
            pause: 1,
            pager: '#slider-nav-pager-1',
            height: '433px',
            width: '960px'
        })
    </script>
  2. #2
  3. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    If that's a YouTube video, as far as I know, you can not tell when someone clicks on it.

    http://stackoverflow.com/questions/5...or-loses-focus
    http://stackoverflow.com/questions/2...ing-javascript
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  4. #3
  5. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,142
    Rep Power
    183
    Originally Posted by Kravvitz
    If that's a YouTube video, as far as I know, you can not tell when someone clicks on it.

    http://stackoverflow.com/questions/5...or-loses-focus
    http://stackoverflow.com/questions/2...ing-javascript
    I think JCKnoell is wanting help with alignment of youtube video within slider's slide and I think he/she is wanting to be able to control slider's actions based upon interaction with youtube video. And..., it looks like OP is also wanting to be able to change wmode/opacity of video; on slide change, but that's just my interpretation of what the OP is wanting.
  6. #4
  7. CSS & JS/DOM Adept
    Devshed Supreme Being (6500+ posts)

    Join Date
    Jul 2004
    Location
    USA (verifiably)
    Posts
    20,124
    Rep Power
    4304
    Good point. He did ask multiple questions.

    You can't change the opacity of a YouTube video. As far as I know, opacity works on <video> elements, but not on Flash-based videos.

    As to positioning things, I don't feel like messing with incomplete code. Perhaps someone else will help him with that.

    Comments on this post

    • web_loone08 agrees : I was thinking the same thing..., I was going to let a pro, like yourself, swing for the fences on this one Kravvitz... lol jk. :)
    Spreading knowledge, one newbie at a time.

    Check out my blog. | Learn CSS. | PHP includes | X/HTML Validator | CSS validator | Common CSS Mistakes | Common JS Mistakes

    Remember people spend most of their time on other people's sites (so don't violate web design conventions).
  8. #5
  9. A Not To Shabby Code Smurf
    Devshed Beginner (1000 - 1499 posts)

    Join Date
    Aug 2008
    Posts
    1,142
    Rep Power
    183
    Originally Posted by Kravvitz
    Good point. He did ask multiple questions.

    You can't change the opacity of a YouTube video. As far as I know, opacity works on <video> elements, but not on Flash-based videos.

    As to positioning things, I don't feel like messing with incomplete code. Perhaps someone else will help him with that.
    Yeah, that's a little more then I want to sink my teeth into too.
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jun 2013
    Posts
    50
    Rep Power
    2
    Sorry guys, I know its a lot to take in... I think I can eventually figure out the placement... It's more the issues with the slider stopping when the video plays, etc.

    Thanks for replying, at least. Does anyone else have any thoughts?

IMN logo majestic logo threadwatch logo seochat tools logo