queue  45
support
Page 1 of 2 12 LastLast
Results 1 to 10 of 12

Thread: Playable video on Portfolio page without going to external page or Post

  1. #1

    Playable video on Portfolio page without going to external page or Post



    Is there a way to make the Featured Image in the drop down playable for my portfolio? I'd like the Portfolio page to be still images, but once an image is clicked the drop down gives them the option to play. Currently the user has one extra click to be able to watch the Vimeo link.

    By the way, I love this Wordpress site and it is going to be great for my portfolio once I can get this working. Thanks!

    Brian
    http://brianolson.tv

  2. #2
    Hello,

    This is not supported by the theme, but it is doable.

    First make sure you have set the video projects correctly, and you have assigned a video at each one.

    Now you will need to edit two files.

    The first file you need to edit is portfolio.php located at the themes root folder.
    Open that file and search for this part of code:
    PHP Code:
    <?php if (!empty($meta->project->url) && !empty($meta->project->label)): ?>
    data-link-url="<?php echo esc_url($meta->project->url); ?>"
    data-link-label="<?php echo esc_attr($meta->project->label); ?>"
    <?php endif; ?>
    Exactly after that part add this code:
    PHP Code:
    <?php 
    if( $content->format() == 'video' ): 
    $v $t->video->getInfo$meta->video->id );                    
    ?>
    data-video-url = "<?php echo $v->url ?>"
    data-video-type = "<?php echo $v->type ?>"
    data-video-id = "<?php echo $v->id ?>"
    <?php else: ?>
    data-video-url = ""
    <?php endif; ?>
    The second file is grid.js which is located at the js folder.
    Search for this part :
    Code:
    // update preview´s content
    var $itemEl = this.$item.children( 'a' ),
    eldata = {
    href : $itemEl.attr( 'href' ),
    largesrc : $itemEl.data( 'largesrc' ),
    	title : $itemEl.data( 'title' ),
    	link : $itemEl.attr( 'data-link-url' ),
    	label : $itemEl.attr( 'data-link-label' ),
    description : $itemEl.data( 'description' )
    };
    and replace it with :
    Code:
    // update preview´s content
    var $itemEl = this.$item.children( 'a' ),
    eldata = {
    href : $itemEl.attr( 'href' ),
    largesrc : $itemEl.data( 'largesrc' ),
    	title : $itemEl.data( 'title' ),
    	link : $itemEl.attr( 'data-link-url' ),
    	label : $itemEl.attr( 'data-link-label' ),
    description : $itemEl.data( 'description' ),
    	videoURL : $itemEl.data( 'video-url' ),
    	videoType : $itemEl.data( 'video-type' ),
    	videoId : $itemEl.data( 'video-id' ),
    };
    Last search for this:
    Code:
    if( self.$fullimage.is( ':visible' ) ) {
    	this.$loading.show();
    	$( '<img/>' ).load( function() {
    		var $img = $( this );
    		if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
    			self.$loading.hide();
    			self.$fullimage.find( 'img' ).remove();
    			self.$largeImg = $img.fadeIn( 350 );
    			if ($.browser.msie) {
    				self.$largeImg.width("auto").height("auto");				
    			}
    			self.$fullimage.append( self.$largeImg );
    		}
    	} ).attr( 'src', eldata.largesrc );	
    }
    and replace it with this:
    Code:
    if( self.$fullimage.is( ':visible' ) && eldata.videoURL =='' ) {
    	this.$loading.show();
    	$( '<img/>' ).load( function() {
    		var $img = $( this );
    		if( $img.attr( 'src' ) === self.$item.children('a').data( 'largesrc' ) ) {
    			self.$loading.hide();
    			self.$fullimage.find( 'img' ).remove();
    			self.$fullimage.find( 'iframe' ).remove();
    			self.$largeImg = $img.fadeIn( 350 );
    			if ($.browser.msie) {
    				self.$largeImg.width("auto").height("auto");				
    			}
    			self.$fullimage.append( self.$largeImg );
    		}
    	} ).attr( 'src', eldata.largesrc );	
    }
    if( eldata.videoURL != ''){
    	this.$loading.show();
    	self.$loading.hide();
    	if( eldata.videoType == "youtube" )
    	self.$fullimage.append( '<iframe width="500" height="250" src="//www.youtube.com/embed/'+eldata.videoId+'" frameborder="0" allowfullscreen></iframe>' ).show();
    	if( eldata.videoType == "vimeo" )
    	self.$fullimage.append( '<iframe src="//player.vimeo.com/video/'+eldata.videoId+'" width="500" height="250" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>').show();
    }
    Last edited by Panos; 10-21-2013 at 13:20.

  3. #3
    Hello,

    This was what I was looking for in my post in your forum.

    It actually did it but have a small issue.

    The video is not completely visible, for it is cropped incorrectly:

    Has black on the left and is cut from the right...

  4. #4
    Here's a link to the page
    http://orangereel.com/?page_id=82

  5. #5
    You can add this
    Code:
     style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"
    inside the <iframe> tag at grid.js so it looks like:
    Code:
    if( eldata.videoType == "youtube" )
    	self.$fullimage.append( '<iframe width="500" height="250" src="//www.youtube.com/embed/'+eldata.videoId+'" frameborder="0" allowfullscreen style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe>' ).show();
    	if( eldata.videoType == "vimeo" )
    	self.$fullimage.append( '<iframe src="//player.vimeo.com/video/'+eldata.videoId+'" width="500" height="250" webkitallowfullscreen mozallowfullscreen allowfullscreen style="position: absolute;top: 0;left: 0;width: 100%;height: 100%;"></iframe>').show();
    You could also use a class name instead and insert the css code in the Custom CSS field at admin->Appearacne->Theme Options

  6. #6
    Works great!!!

    Thank you!!!

  7. #7
    You're welcome!

    If you are happy with our product & support, please consider giving it a 5 star rating.
    Good ratings promote sales and ensure continued feature updates.
    Rating is done via the "Downloads" page of your Envato account.

  8. #8
    Junior Member
    Join Date
    Feb 2014
    Posts
    8
    This worked great...except for this: Go to http://dedappermedia.com/new/ and click on the single item in the portfolio. Video is housed in a square iframe with large black bands on top and bottom.

  9. #9
    Lead Support Ante's Avatar
    Join Date
    Oct 2012
    Posts
    16,930
    Hi,
    add this to your Custom CSS field in Theme Options panel:
    Code:
    .og-fullimg iframe {
    position: absolute;
    top: 0;
    left: 0;
    }
    
    .og-fullimg {
    height: auto !important;
    position: relative;
    padding-bottom: 22.5%;
    }
    That should do the trick

  10. #10
    Junior Member
    Join Date
    Feb 2014
    Posts
    8
    Nailed it! Thanks. I was messing around with the wrong commands....