Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 7 of 7
  1. #1
    New to the CF scene
    Join Date
    Jul 2018
    Location
    Gloucestershire
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Trying to implement HTML5 video lightbox

    I purchased a ThemeForest template which I am using to create a website for a family member. One of the requirements he has is that when selected portfolio images from the home page are clicked, a video lightbox will appear. I've found a HTML5 video lightbox that looks like it does the job here.

    So far I've created the CSS stylesheet and JS and referenced these in the index.html (where I want the lightbox to be). Unfortunately I'm struggling combining the existing code (from the template) with the HTML code from the lightbox.

    Current live website can be viewed here.

    This is the HTML5 video lightbox code:

    Code:
    <div class="summary">The links below will open a video light box that will never exede the height or width of your current window when it is opened or resized. It will dynamically load a video url based on the vidUrl attribute.</div>
    
    <div class="video-link" vidUrl="https://archive.org/download/my_favorite_brunette/my_favorite_brunette_512kb.mp4">My Favorite Brunette - Click to Play</div>
    
    <div class="video-link" vidUrl="https://archive.org/download/The_House_On_Haunted_Hill/The_House_On_Haunted_Hill_512kb.mp4">The House on Haunted Hill - Click to Play</div>
    
    
      
       <div class="overlay vid-link" vidUrl="#"></div>
    	  <div class="main-vid-box">
    	    
    	   	      <div class="videoWrapper">
    	          <video autoplay="autoplay" class="myVideo" src="" frameborder="0" controls></video>
    	   	      </div>
    	  </div>
      
      <img class="close vid-link" vidUrl="#" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">

    This is the existing code on the website:

    Code:
    <div class="works-item signature-adler ImageWrapper works-item-one-half info logos ui">
                          <img data-no-retina alt="" title="" class="img-responsive" src="images/works/11.jpg"/>
                          <a  class="venobox" data-gall="portfolio-gallery" href="images/works/11.jpg">
                              <div class="works-item-inner ImageOverlayHe">
                                <p class="valign text-center"><span class="white font3">VICTORIA BECKHAM</span></p>
                              </div>
                          </a>
                  </div>
    I simply want to be able to click on the image and for a video lightbox to appear, but however I re-arrange the code, I just can't quite get there!

    Thank you in advance!

  2. #2
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,646
    Thanks
    34
    Thanked 1,034 Times in 1,031 Posts
    Although you posted the HTML, the work converting a "click on image" to showing a video is done by the Jquery. Lets look at it and see what you need:
    Code:
      $('.video-link').click(function() {
        $('.myVideo').attr("src", $(this).attr("vidUrl"));
        $('.overlay').fadeIn(500, function(){
          $('.main-vid-box').fadeIn(500);
          $('.close').fadeIn(500);
        });
      });
    We see this color is monitoring what needs to be clicked on. You don't have that.
    In this color the JQ adds a link to the video player.

    You need something like this:
    Code:
    <p><img src="https://www.codingforums.com/images/works/11.jpg" class="video-link" width="178" height="103" vidUrl="https://archive.org/download/my_favorite_brunette/my_favorite_brunette_512kb.mp4">
    <br><span class="white font3">VICTORIA BECKHAM</span></p>
    
    <div class="overlay vid-link" vidUrl="#"></div>
    <div class="main-vid-box">
    	<div class="videoWrapper">
    		<video autoplay="autoplay" class="myVideo" src="" frameborder="0" controls></video>
    	</div>
    </div>
    <img class="close vid-link" vidUrl="#" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  3. #3
    New to the CF scene
    Join Date
    Jul 2018
    Location
    Gloucestershire
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by sunfighter View Post
    Although you posted the HTML, the work converting a "click on image" to showing a video is done by the Jquery. Lets look at it and see what you need:
    Code:
      $('.video-link').click(function() {
        $('.myVideo').attr("src", $(this).attr("vidUrl"));
        $('.overlay').fadeIn(500, function(){
          $('.main-vid-box').fadeIn(500);
          $('.close').fadeIn(500);
        });
      });
    We see this color is monitoring what needs to be clicked on. You don't have that.
    In this color the JQ adds a link to the video player.

    You need something like this:
    Code:
    <p><img src="https://www.codingforums.com/images/works/11.jpg" class="video-link" width="178" height="103" vidUrl="https://archive.org/download/my_favorite_brunette/my_favorite_brunette_512kb.mp4">
    <br><span class="white font3">VICTORIA BECKHAM</span></p>
    
    <div class="overlay vid-link" vidUrl="#"></div>
    <div class="main-vid-box">
    	<div class="videoWrapper">
    		<video autoplay="autoplay" class="myVideo" src="" frameborder="0" controls></video>
    	</div>
    </div>
    <img class="close vid-link" vidUrl="#" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">
    Thank you Sunfighter. I really appreciate your response. The only issue is if I copy your last bit of code, I'm going to lose the styling from the ThemeForest template. Is there no way to use the existing code on the website that I've outlined as well as making the words 'VICTORIA BECKHAM' generate a video player when clicked on?

  4. #4
    New to the CF scene
    Join Date
    Jul 2018
    Location
    Gloucestershire
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    I've attempted to implement the JQuery and the code above (in keeping with the ThemeForest template style) and now the image on the homepage of the website has become smaller, and once clicked on, the homepage refreshes. It looks like it's trying to do something but can't quite get there?

  5. #5
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,646
    Thanks
    34
    Thanked 1,034 Times in 1,031 Posts
    Since you have changed your code we would need to to see your new code. Please post all sufficient code.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.

  6. #6
    New to the CF scene
    Join Date
    Jul 2018
    Location
    Gloucestershire
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Sorry, I thought you could inspect the web page - I do appreciate your help, I'm just getting myself into a muddle here (I'm definitely no expert).

    I placed the JQuery code at the start of the <body> tag like this:

    Code:
    <script>  $('.video-link').click(function() {
        $('.myVideo').attr("src", $(this).attr("vidUrl"));
        $('.overlay').fadeIn(500, function(){
          $('.main-vid-box').fadeIn(500);
          $('.close').fadeIn(500);
        });
      });
      </script>
    Then the Victoria Beckham section of the homepage like this:

    Code:
    <div class="works-item signature-adler ImageWrapper works-item-one-half play logos ui">
                          <img data-no-retina alt="" title="" class="img-responsive" src="images/works/11.jpg" class="video-link" width="178" height="103" vidUrl="videos/VICTORIA BECKHAM - Spring Collection 2017_sshowreel.mov"/>
                          <a  class="venoframe" data-gall="portfolio-gallery" href="">
    					  <div class="overlay vid-link" vidUrl="videos/VICTORIA BECKHAM - Spring Collection 2017_sshowreel.mov"></div>
    						<div class="main-vid-box">
    							<div class="videoWrapper">
    								<video autoplay="autoplay" class="myVideo" src="" frameborder="0" controls></video>
    							</div>
    						</div>
    						<img class="close vid-link" vidUrl="videos/VICTORIA BECKHAM - Spring Collection 2017_sshowreel.mov" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">
                              <div class="works-item-inner ImageOverlayHe">
                                <p class="valign text-center"><span class="white font3">VICTORIA BECKHAM</span></p>
                              </div>
                          </a>
                  </div>
    You can see the disaster at Timothy Maryon | Home

  7. #7
    Master Coder sunfighter's Avatar
    Join Date
    Jan 2011
    Location
    Washington
    Posts
    7,646
    Thanks
    34
    Thanked 1,034 Times in 1,031 Posts
    Sorry, I thought you could inspect the web page
    Yes I can, but when I went to look at it the page didn't load/ Today it loads - go figure.
    After looking at the page having the image start the video is a bad idea. The key is class="vid-link" I placed it on the image. No problem cause the back shade disallows clicking on it. but it does need to be on the name:
    Here's the html that makes the name clickable, left the CLASS on the image thou"
    Code:
    <img class="close vid-link" vidUrl="videos/VICTORIA BECKHAM - Spring Collection 2017_sshowreel.mov" src="https://jsbin-user-assets.s3.amazonaws.com/ipodscott/close.svg">
    <div class="works-item-inner ImageOverlayHe">
    	<p class="valign text-center"><span class="white font3 vid-link">VICTORIA BECKHAM</span></p>
    </div>
    </a>
    I see no reason why the image is smaller. class="close" is what should give us the size. But if you do things by the book the height and width should be decaired in the <img> tag.
    Last edited by sunfighter; Jul 17th, 2018 at 06:35 AM.
    Evolution - The non-random survival of random variants.
    Physics is actually atoms trying to understand themselves.


 

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •