solved Grid of Videos

michaelcawood
@michaelcawood
9 years ago
77 posts
I'd like to create a grid of videos on a page, but it looks like the only way anyone has been able to do that is by getting into code and some complex elements of Jamroom. Perhaps those are just old forum threads? I'm just wondering if anyone has a novice-friendly way to make a grid. Perhaps a module or a widget, or an option for the Item List widget.

http://animatedfilmmakers.com/devilsangelsanddating/videos

Any tips would be appreciated. Thanks.
updated by @michaelcawood: 03/12/16 11:42:02AM
paul
@paul
9 years ago
4,325 posts
Hi Michael
Checkout our SiteBuilder module. It will allow you to layout site pages with pre-configured 'widgets' with drag'n'drop positioning. It is still in beta (but ready for release almost) so from your ACP=> Core=> Marketplace=> Tools=Release Channels page enable the beta channel, then install it from the marketplace as you would any other module.
SiteBuilder docs. here - https://www.jamroom.net/site-builder/documentation


--
Paul Asher - JR Developer and System Import Specialist
michaelcawood
@michaelcawood
9 years ago
77 posts
I'm already using the site builder. That doesn't give you the ability to create a grid of videos as far as I can tell. Only a list... hense the results you see here:
http://animatedfilmmakers.com/devilsangelsanddating/videos
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
Select Grid from the template section when your adding the widget.
michaelcawood
@michaelcawood
9 years ago
77 posts
Thanks Gary... but where is the Grid option? I don't see any grid options anywhere in Jamroom.
brian
@brian
9 years ago
10,144 posts
michaelcawood:
Thanks Gary... but where is the Grid option? I don't see any grid options anywhere in Jamroom.

There are some modules that have grid template options in Site Builder (such as profiles and image galleries) - I don't think anyone has ever wanted a "grid" of videos yet though, so grid templates are not something we've added for videos. Which video module are you using? Video, YouTube or Vimeo?

Note that having a grid of YouTube and Vimeo videos could be a "heavy" hitter if you try to load dozens of YouTube videos at once - just an FYI.


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
michaelcawood
@michaelcawood
9 years ago
77 posts
I have been using YouTube and Vimeo mostly to setup widgets.

A grid seems pretty standard in a lot of websites, Youtube and Vimeo included. I would not assume that each image in the grid was a live video.
gary.moncrieff
gary.moncrieff
@garymoncrieff
9 years ago
865 posts
I seen grid for the video module today. Didn't check the others.
Strumelia
Strumelia
@strumelia
9 years ago
3,602 posts
The trouble with a list view is a "/video" page with large amount of blank space on the right, and many tedious pages long.
Has no one mentioned the Seamless module for combining the display of vimeo, youtube, and uploaded vids into one unified location for member viewing?
Michael, I do not use site builder, nor am I a coder...but is this kind of what you are describing?:
http://fotmd.com/video

If so, you should read this old thread, it might help get you on the right path:
https://www.jamroom.net/the-jamroom-network/forum/design-and-skin-customization/30668/does-anyone-have-the-code-to-do-a-grid-layout-of-videos-images-etc
(can also be adapted for the photos/images page of your site)



--
...just another satisfied Jamroom customer.
Migrated from Ning to Jamroom June 2015

updated by @strumelia: 12/05/15 02:20:55PM
brian
@brian
9 years ago
10,144 posts
gary.moncrieff:
I seen grid for the video module today. Didn't check the others.

You're right Gary - there is a grid template option for the Video module - Michael or Paul must have snuck that in :)


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net
derrickhand300
@derrickhand300
9 years ago
1,353 posts
If you are looking for something like this
http://sayreeagles.net/videos

Paste this code into the template editor box in site builder on the page you want it-I think it may work with any of the jamroom skins- or close
I have removed the vimeo code but could be easily added back

<h1>My Site Videos</h1>
<div id="vidwrap">
<p><a title="Share A YouTube Video" href="http://sayreeagles.net/href="http:/sayreeagles.net/youtube/create" target="_blank"><img style="float: left; margin: 10px;" src="http://sayreeagles.net/upimg/image/upimg_file/74/128" alt="Share A YouTube Video" border="0"></a> <a title="Upload A Video File From Your Device" href="http://sayreeagles.net/uploaded_video/create" target="_blank"><img style="float: left; margin: 10px;" src="http://sayreeagles.net/upimg/image/upimg_file/75/128" alt="Upload A Video From Your Device" border="0"></a></p>
{capture name="template" assign="tpl"}
{literal}
    <div class="container">
        {foreach $_items as $item}
        {if $item@first || ($item@iteration % 3) == 1}
        <div class="row">
            {/if}
            <div class="col4">
                <div class="img-profile">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.video_title_url}">
                        <img src="{$item.youtube_artwork_url}" class="rank_image" width=320 height=180/></a>                  
                    {elseif $item.seamless_module_name == "jrVideo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" alt=$item.video_title title=
$item.video_title class="top_rank" width=320 height=180}</a>
                            {/if}
                        </div>
                
                <div class="center mb10">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title}">{$item.youtube_title|truncate:24}</a>                   
                         {elseif $item.seamless_module_name == "jrVideo"}   
                        <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                        {/if}
                        <br>                      
                </div>
            </div>
            {if $item@last || ($item@iteration % 3) == 0}
        </div>
        {/if}
        {/foreach}
    </div>
{/literal}
{/capture}
  {jrSeamless_list modules="jrVideo,jrYouTube" order_by="_created numerical_desc"  pagebreak=30 page=$_post.p pager=true template=$tpl}</div>



CSS which you can edit or omit
 #vidwrap {
  width: 95%;
  margin: 0px 0px 0px 0px;
  padding: 16px 16px 16px 16px;
    height: auto;
  line-height: 100%;
  border-radius: 15px;
  -webkit-border-radius: 15px;
  -moz-border-radius: 15px;
  box-shadow: 2px 2px 3px #666666;
  -webkit-box-shadow: 2px 2px 3px #666666;
  -moz-box-shadow: 2px 2px 3px #666666;
  background: #5D0303;
  background: linear-gradient(top,  #5D0303,  #000000);
  background: -ms-linear-gradient(top,  #5D0303,  #000000);
  background: -webkit-gradient(linear, left top, left bottom, from(#5D0303), to(#000000));
  background: -moz-linear-gradient(top,  #5D0303,  #000000);
  border: solid 2px #000000;
  position:relative;
  z-index:0;
   }

Disclaimer-I make no guarantees that my code is not dripping with errors-I dont know what im doing and just hack stuff together best I can to get by- Hope that helps

OH and you would need to copy/host the "upload video" images if you wanted to use them- otherwise you would need to remove them
updated by @derrickhand300: 12/05/15 11:56:49PM
michaelcawood
@michaelcawood
9 years ago
77 posts
Thanks Strumelia and Derrick, and yes any grid layout would be better than the list. I have seen the other threads and haven't figured out how all that works. Where do you go to create a new template? Then when you've made one how do you implement it?
michaelcawood
@michaelcawood
9 years ago
77 posts
I figured out that the template code goes here:
Widget Content > Template > Custom

But I'm still not clear where the CSS is placed to make that work. Any tips?
derrickhand300
@derrickhand300
9 years ago
1,353 posts
yes thats where you put it....the css would go in probably site.css which is accessed on your server by FTP
It will be in the >skins folder>your skin name>css folder>site.css...
Myself I have a custom.css where I add all my custom css but if you copied that css above and pasted it to your site.css file it would likely work...run integrity check then view the site
derrickhand300
@derrickhand300
9 years ago
1,353 posts
to edit the above code I think the 1st place to start is the
<div class="col4">
play with that number to change the layout then change the size of the video images in the code where it gives it...a great tool for getting the dimensions for these video images is here

http://size43.com/jqueryVideoTool.html
derrickhand300
@derrickhand300
9 years ago
1,353 posts
Maybe this video will help...or confuse you more :)
michael css style sheet
michaelcawood
@michaelcawood
9 years ago
77 posts
Wow. That's the first time someone has made a video to help me specifically. You've won yourself a fan Derrick. Thank you.
derrickhand300
@derrickhand300
9 years ago
1,353 posts
you're welcome man
michaelcawood
@michaelcawood
9 years ago
77 posts
This only works with the Seamless module, I'm guessing?
derrickhand300
@derrickhand300
9 years ago
1,353 posts
yes you will need to install seamless
michaelcawood
@michaelcawood
9 years ago
77 posts
Ok. I have the basics working.
http://animatedfilmmakers.com/devilsangelsanddating/videos

A few things I need to do still though:
1) Remove the border/frame. Is that in the CSS?
2) Correct the aspect ratio of the videos. They seem squashed vertically.
3) Make the video titles a few characters longer.
4) Add Vimeo functionality
5) The local "Video" movies don't work. When you click on them it goes to a non-existant page.

I'll dig in later today but any tips in the mean time are appreciated.
paul
@paul
9 years ago
4,325 posts
Hi Michael
The border and aspect ratio can likely be fixed in the CSS - is there a height setting that is squashing the video images?

To make the video titles longer, change the 'truncate' modifier parameter where the titles are in the template - {$item.video_title|truncate:24} so chanhe the 24 to whatever number of characters you want.

To add Vimeo to the grid, first add it to the jrSeamless_list call - {jrSeamless_list modules="jrVideo,jrYouTube,jrVimeo" order_by="_created numerical_desc" pagebreak=30 page=$_post.p pager=true template=$tpl} - then add the appropriate code to the 'captured' code to the two places where it tests for what type of video, the {if . . .}{elseif . . .}{/if} statements -
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title_url}">
                        <img src="{$item.youtube_artwork_url}" class="rank_image" width=320 height=180/></a>                  
                    {elseif $item.seamless_module_name == "jrVideo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" alt=$item.video_title title=
$item.video_title class="top_rank" width=320 height=180}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">
                             <img src="{$item.vimeo_artwork_url}" class="rank_image" width=320 height=180/></a>                  
                        </a>
                    {/if}
and
                    {if $item.seamless_module_name == "jrYouTube"}
                        <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title|truncate:24}</a>                   
                    {elseif $item.seamless_module_name == "jrVideo"}   
                        <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title|truncate:24}</a>                   
                    {/if}

Can you identify for me a local video that is linking to a non-existant page so that I can check it (save me clicking on the all to find it lol)
Thanks


--
Paul Asher - JR Developer and System Import Specialist

updated by @paul: 12/07/15 12:41:10AM
michaelcawood
@michaelcawood
9 years ago
77 posts
Most of the videos on this page are local:
http://animatedfilmmakers.com/devilsangelsanddating/videos/p=50
paul
@paul
9 years ago
4,325 posts
OK - I see the problem. Its because you have the Combine Video module installed and this changes what we call the module url from 'video' to 'uploaded_video'. In your template code you have the module urls written as absolute values, which is bad practice. Try this code -

<h1>My Site Videos</h1>
<div id="vidwrap">
    <p><a title="Share A YouTube Video" href="http://sayreeagles.net/href="http:/sayreeagles.net/youtube/create" target="_blank"><img style="float: left; margin: 10px;" src="http://sayreeagles.net/upimg/image/upimg_file/74/128" alt="Share A YouTube Video" border="0"></a> <a title="Upload A Video File From Your Device" href="http://sayreeagles.net/uploaded_video/create" target="_blank"><img style="float: left; margin: 10px;" src="http://sayreeagles.net/upimg/image/upimg_file/75/128" alt="Upload A Video From Your Device" border="0"></a></p>
    {capture name="template" assign="tpl"}
    {literal}
        {jrCore_module_url module="jrVideo" assign="vdurl"}
        {jrCore_module_url module="jrVimeo" assign="vmurl"}
        {jrCore_module_url module="jrYouTube" assign="yturl"}
        <div class="container">
            {foreach $_items as $item}
            {if $item@first || ($item@iteration % 3) == 1}
            <div class="row">
                {/if}
                <div class="col4">
                    <div class="img-profile">
                        {if $item.seamless_module_name == "jrYouTube"}
                        <a href="{$jamroom_url}/{$item.profile_url}/{$yturl}/{$item._item_id}/{$item.youtube_title_url}">
                            <img src="{$item.youtube_artwork_url}" class="rank_image" width=320 height=180/></a>
                        {elseif $item.seamless_module_name == "jrVideo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/{$vdurl}/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" alt=$item.video_title title=
                            $item.video_title class="top_rank" width=320 height=180}</a>
                        {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}">
                    </div>

                    <div class="center mb10">
                        {if $item.seamless_module_name == "jrYouTube"}
                            <a href="{$jamroom_url}/{$item.profile_url}/{$yturl}/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title|truncate:24}</a>
                        {elseif $item.seamless_module_name == "jrVideo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/{$vdurl}/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                        {elseif $item.seamless_module_name == "jrVimeo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/{$vmurl}/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title|truncate:24}</a>
                        {/if}
                        <br>
                    </div>
                </div>
                {if $item@last || ($item@iteration % 3) == 0}
            </div>
            {/if}
            {/foreach}
        </div>
    {/literal}
    {/capture}
    {jrSeamless_list modules="jrVideo,jrYouTube,jrVimeo" order_by="_created numerical_desc"  pagebreak=30 page=$_post.p pager=true template=$tpl}</div>

Note that I have added {jrCore_module_url . . .} calls to the top of the 'captured' code to assign the actual module urls to smarty variables, then used those variables in the link URLs instead of the absolute values you had.
Hope that makes sense.
Pa


--
Paul Asher - JR Developer and System Import Specialist
michaelcawood
@michaelcawood
9 years ago
77 posts
Thanks Paul. I tired that but it came up with a syntax error. So I'm currently trying this:

<div id="vidwrap">
{capture name="template" assign="tpl"}
{literal}
    <div class="container">
        {foreach $_items as $item}
        {if $item@first || ($item@iteration % 3) == 1}
        <div class="row">
            {/if}
            <div class="col4">
                <div class="img-profile">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.video_title_url}">
                        <img src="{$item.youtube_artwork_url}" class="rank_image" width=320 height=180/></a>                  
                    {elseif $item.seamless_module_name == "jrVideo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" alt=$item.video_title title=
$item.video_title class="top_rank" width=320 height=180}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">
                             <img src="{$item.vimeo_artwork_url}" class="rank_image" width=320 height=180/></a>                  
                        </a>
                    {/if}
                        </div>
                
                <div class="center mb10">
                   {if $item.seamless_module_name == "jrYouTube"}
                        <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title|truncate:24}</a>                   
                    {elseif $item.seamless_module_name == "jrVideo"}   
                        <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:24}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title|truncate:24}</a>                   
                    {/if}
                        <br>                      
                </div>
            </div>
            {if $item@last || ($item@iteration % 3) == 0}
        </div>
        {/if}
        {/foreach}
    </div>
{/literal}
{/capture}
  {jrSeamless_list modules="jrVideo,jrYouTube,jrVimeo" order_by="_created numerical_desc"  pagebreak=30 page=$_post.p pager=true template=$tpl}</div>
michaelcawood
@michaelcawood
9 years ago
77 posts
The "video" links aren't working yet.
paul
@paul
9 years ago
4,325 posts
Probably because you still have those 'absolute' module urls in the code.
Let me have your admin login and FTP login and I'll try and sort it for you - support [at] jamroom [dot] net


--
Paul Asher - JR Developer and System Import Specialist
michaelcawood
@michaelcawood
9 years ago
77 posts
Here's the latest version of the code I'm trying. It still has a few issues though:

1) Most videos seem to be adding borders where they aren't required and squashing the vertical.
2) The local "video" movies aren't working. http://animatedfilmmakers.com/devilsangelsanddating/videos/p=50
3) There's an extra set of controls at the bottom of the widget. Any idea how to remove them?

<div id="vidwrap">
{capture name="template" assign="tpl"}
{literal}
    <div class="container">
        {foreach $_items as $item}
        {if $item@first || ($item@iteration % 3) == 1}
        <div class="row">
            {/if}
            <div class="col4">
                <div class="img-profile">
                    {if $item.seamless_module_name == "jrYouTube"}
                    <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.video_title_url}">
                        <img src="{$item.youtube_artwork_url}" class="rank_image" width=330 height=186/></a>                  
                    {elseif $item.seamless_module_name == "jrVideo"}
                            <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{jrCore_module_function function="jrImage_display" module="jrVideo" type="video_image" item_id=$item._item_id size="large" alt=$item.video_title title=
$item.video_title class="top_rank" width=330 height=186}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">
                             <img src="{$item.vimeo_artwork_url}" class="rank_image" width=330 height=186/></a>                  
                        </a>
                    {/if}
                        </div>
                
                <div class="center mb10">
                   {if $item.seamless_module_name == "jrYouTube"}
                        <a href="{$jamroom_url}/{$item.profile_url}/youtube/{$item._item_id}/{$item.youtube_title_url}">{$item.youtube_title|truncate:50}</a>                   
                    {elseif $item.seamless_module_name == "jrVideo"}   
                        <a href="{$jamroom_url}/{$item.profile_url}/video/{$item._item_id}/{$item.video_title_url}">{$item.video_title|truncate:50}</a>
                    {elseif $item.seamless_module_name == "jrVimeo"}
                        <a href="{$jamroom_url}/{$item.profile_url}/vimeo/{$item._item_id}/{$item.vimeo_title_url}">{$item.vimeo_title|truncate:50}</a>                   
                    {/if}
                        <br>                      
                </div>
            </div>
            {if $item@last || ($item@iteration % 3) == 0}
        </div>
        {/if}
        {/foreach}
    </div>
{/literal}
{/capture}
  {jrSeamless_list modules="jrVideo,jrYouTube,jrVimeo" order_by="_created numerical_desc"  pagebreak=30 page=$_post.p pager=true template=$tpl}</div>
paul
@paul
9 years ago
4,325 posts
You still haven't resolved the absolute module url issue.

It would be easiest for me to fix this up on your site then explain what I've done.


--
Paul Asher - JR Developer and System Import Specialist
michaelcawood
@michaelcawood
9 years ago
77 posts
Indeed. Yes. When I tried your version of the code with the URL fix I got a Syntax Error.
michael
@michael
9 years ago
7,697 posts
Looks like your page is close to what your asking currently:
http://animatedfilmmakers.com/devilsangelsanddating/videos

the only think I can see that is an issue with the links is the image link doesnt contain the name in the url like the text one does:
http://animatedfilmmakers.com/devilsangelsanddating/michael-cawood/youtube/1486/
http://animatedfilmmakers.com/devilsangelsanddating/michael-cawood/youtube/1486/sh0285_earth_roots-effects

Its not a problem that will break anything because the 'sh0285_earth_roots-effects' part of the link is just for show. You could fix it by making the link for the image the same as the link for the text if you liked to.

Is there still a problem you're needing help with?
michael
@michael
9 years ago
7,697 posts
michaelcawood:
Here's the latest version of the code I'm trying. It still has a few issues though:

1) Most videos seem to be adding borders where they aren't required and squashing the vertical.

@derrickhand300 has the solution for you on this one too:
https://www.jamroom.net/the-jamroom-network/forum/design-and-skin-customization/35371/removing-black-bars-from-youtube-thumbnails

Those black bars are coming in from youtube, use his solution above to get rid of them.

michaelcawood:2) The local "video" movies aren't working. http://animatedfilmmakers.com/devilsangelsanddating/videos/p=50

This is one of the url's that is linked to:
http://animatedfilmmakers.com/devilsangelsanddating/charles-lin/video/42/0717_deviltexturewip

But since you have the "combined video" module on, the uploaded video url got moved to:
http://animatedfilmmakers.com/devilsangelsanddating/charles-lin/uploaded_video/42/0717_deviltexturewip

So need to change the url to that.

There is a function that can be used the the templates to find the url for a module its:
{jrCore_module_url module="jrVideo" assign="murl"}

Then once you've done that you can use /{$murl}/ to output the correct module url in the templates.eg:
{jrCore_module_url module="jrVideo" assign="murl"}
http://animatedfilmmakers.com/devilsangelsanddating/charles-lin/{$murl}/42/0717_deviltexturewip
michaelcawood
@michaelcawood
9 years ago
77 posts
Thanks for pointing out the borders fix Michael. Regrettably it didn't seem to work.

I have the local "video" movies working now. I had the Combined Video module installed but not active because until recently I didn't have the Seamless module that it required. Once I activated the Combined Video module the links seemed to work.

Any thoughts on how to get rid of the extra controls at the bottom of the page here?
http://animatedfilmmakers.com/devilsangelsanddating/videos
michael
@michael
9 years ago
7,697 posts
I get confused easily and there are a bunch of questions happening at the same time here. What does "Regrettably it didn't seem to work." mean?

Of the videos on this page:
http://animatedfilmmakers.com/devilsangelsanddating/videos

One of them has the image that appears here:
http://img.youtube.com/vi/AklEEuRKpnc/0.jpg

It seams like the image URL that you are after is this one:
http://img.youtube.com/vi/AklEEuRKpnc/mqdefault.jpg

So you need to adjust the img src="...." that is showing the image to the structure of the one you're wanting.

---edit--
so if that code above is still what you're using, the the line that has:
<img src="{$item.youtube_artwork_url}" class="rank_image" width=330 height=186/>
change to
<img src="https://img.youtube.com/vi/{$item.youtube_id}/mqdefault.jpg" class="rank_image" width=330 height=186/>

and that should get rid of the black bars. Once we get rid of them, we can move on to the next issue.

updated by @michael: 12/08/15 12:17:29AM
michaelcawood
@michaelcawood
9 years ago
77 posts
"Regrettably it didn't seem to work." means "It didn't work"... but you know that already. You gave me a modified fix, and it's now working (aside form some missing thumbnails for Vimeo videos). Thank you.

So YouTube and local Videos - Thumbs up...
Vimeo - Thumbs down... for now.

The debugging continues... :)
michael
@michael
9 years ago
7,697 posts
Great, next.

Whats up with vimeo?

I can see that your vimeo links for the image point to:
http://i.vimeocdn.com/video/274757282_64mqdefault.jpg

Which is 404 page not found. which makes sense because mqdefault is a youtube thing, looks like you've stuck that on the vimeo url, take it off and it should clear up because this image shows:
http://i.vimeocdn.com/video/274757282_64

But its real small and it has bars on it. Need to figure out what the correct url is. probably the easiest way is to go to a location that is showing the vimeo image correctly and see what its url looks like.
michael
@michael
9 years ago
7,697 posts
Think I see what the issue is. You've probably used the replace system from the other thread to replace:
0|mqdefault.jpg

which is taking the correct vimeo url:
http://i.vimeocdn.com/video/526215158_640.jpg
and replacing the 0.jpg and making it 'mqdefault.jpg'
http://i.vimeocdn.com/video/526215158_64mqdefault.jpg
michaelcawood
@michaelcawood
9 years ago
77 posts
Yes... is there a way to work around that, fixing Youtube but not changing Vimeo links?
michael
@michael
9 years ago
7,697 posts
michaelcawood:
Yes... is there a way to work around that, fixing Youtube but not changing Vimeo links?

yes, do what I said above in the ---edit--- section:
https://www.jamroom.net/the-jamroom-network/forum/new_posts/36009/grid-of-videos#p36132
michaelcawood
@michaelcawood
9 years ago
77 posts
Thanks... video borders fixed.
michael
@michael
9 years ago
7,697 posts
:) good stuff. Well done.
michael
@michael
9 years ago
7,697 posts
Right, so the next thing on this page:
http://animatedfilmmakers.com/devilsangelsanddating/videos

is get rid of the double navigation bars at the bottom.

The most recent code I have to understand what your asking for is this one:
  {jrSeamless_list modules="jrVideo,jrYouTube,jrVimeo" order_by="_created numerical_desc"  pagebreak=30 page=$_post.p pager=true template=$tpl}

Is that the code you're using? If so, try pager=false to see if it gets rid of one of the two bars. If not, let me know the code your using for the jrSeamless_list call please.
michaelcawood
@michaelcawood
9 years ago
77 posts
Bingo! Thank you Michael. That seems to have wrapped up all those issues nicely.
michael
@michael
9 years ago
7,697 posts
Great. I'm going to mark this solved as I believe we are finished on this topic. Let me know if I've overlooked something here. For other new problems, open a new thread with a nice descriptive name that others will look at when they search for things :)

Tags