Has anybody successfully done a video carousel that plays youtube videos in an article? I'm trying to figure this out. This is my son's wordpress site. This is a wordpress plugin that I'd like to somehow do similarly.
http://www.jporubskidesign.com/video/
Take a look at these bro... https://codepen.io/search/pens?q=video+carousel
Thanks Mick, couldn't find anything that is responsive that would work. Appreciate the help though.
Quote from: jernatety on December 06, 2019, 06:33:55 PM
Thanks Mick, couldn't find anything that is responsive that would work. Appreciate the help though.
https://codepen.io/GerardoB/pen/aZdOqy ;)
Alright man, I did a thing...
https://www.idesignsmf.com/index.php/topic,564.0.html :D :D
Thanks Mick, I was just about to try that video slider out myself, you saved me a job working it all out for the block code. O0
Merry Christmas to you. ;)
Quote from: lurkalot on December 24, 2019, 05:51:12 PM
Thanks Mick, I was just about to try that video slider out myself, you saved me a job working it all out for the block code. O0
Merry Christmas to you. ;)
Merry Xmas to you and yours bro ;)
Thanks. ;)
That video slider works nicely, just added it to one of my 2.1 test sites, http://lts4.byethost7.com/index.php O0
Nice one Mike!!! Yhe coolest of this is, you can add 100 videos and the preview is a mile long lol
Nice one Mick!
Just a question though: when I open my site on my IPhone I get a big empty area where the video is supposed to be. When I refresh the page it shows ok: this happens with every visit... see attached...
You can see it here: https://test2.fjr-club.nl
Seems to be the same on Lurkalots test site: your demo site seems to work ok
Did some checking : it happens randomly on an IPhone, both in Safari and Chrome. Problem happens when trying to slide to the next video...
On an Android phone it seems to work fine...
Merry Christmas @rjen.
Not sure why it it's ok on Micks site, and not on ours, but I skipped step 4 in Mick's install instructions because I couldn't open anything from that link to copy it. So I just grabbed the js file from the dist folder and uploaded it (as is)to my theme scripts folder.
Quote
"4. Create a file called unitegallery.min.js inside your theme's script folder and copy everything from here: https://www.idesignsmf.com/Themes/pixel/scripts/unitegallery.min.js then paste it into your file and save."
Hmm..im not sure bro. Mine seem to work fine on safari firefox and chrome. Including on android. Let me check my steps again and see if I missed something.
@rjen, I see youre using the default theme. Lemme check the css file to make the player takeover the entire area as I believe its on a fixed width.
To adjust width and height simply replace the old script bit with this.
<script>
jQuery(document).ready(function(){
jQuery("#gallery").unitegallery({
gallery_width:1100,
gallery_height:600,
});
});
</script>
Does not make much difference ...
Quote from: Mick on December 25, 2019, 01:57:30 PM
To adjust width and height simply replace the old script bit with this.
Just applied that code to my block here. So you can see if it fixes it on iPhone.
I only have windows phone, and Android phone to test on. http://lts4.byethost7.com/index.php
Quote from: @rjen on December 25, 2019, 02:50:22 PM
Does not make much difference ...
@rjen, I changed mine back to the original code because I didn't see any difference either. Did you resolve your issue with viewing on iPhone?
I'm running it in a block not a article, and in 2.1 with default theme.
It's such a cool slider imo, and I could put this to good use on my GG site if we can get it reliable across all common devices.
I haven't worked out how to add a soundcloud track to it yet though, might need to ask Mick on this one.
EDIT: Just seen the code on the official site for soundcloud, so will try this shortly.
<img alt="Sound Cloud Track"
src="thumbs/sound_cloud_thumb.jpg"
data-type="soundcloud"
data-image="images/sound_cloud_image.jpg"
data-trackid="8390970"
data-description="SoundCloud track description">
The problem in the IPhone has not been solved. Somehow it only seems to affect my IPhone (desktop browsers and Android are ok) so it maybe something obscure in IOS :tickedoff:
Now I can reply! woot woot!
Sorry guys I dont own an Iphone.
The documentation is pretty straight forward http://unitegallery.net/index.php?page=documentation I only used the YouTube stuff but It has Vimeo, Soundcloud,images as well.
Adding the width and height did worked for me btw. Funny that its not in the css at all but only in the script type. :idiot2:
Quote from: Mick on December 26, 2019, 12:34:55 PM
Now I can reply! woot woot!
Sorry guys I dont own an Iphone.
The documentation is pretty straight forward http://unitegallery.net/index.php?page=documentation I only used the YouTube stuff but It has Vimeo, Soundcloud,images as well.
Adding the width and height did worked for me btw. Funny that its not in the css at all but only in the script type. :idiot2:
Mick Sorry about the "Not being able to post" thing, we locked the topic by accident. And as soon as it was noticed unlocked it again.
I was just trying a Soundcloud track actually, and although it plays the track fine, I can't seem to get any thumbnail image to go with it, so it looks like this atm, http://lts4.byethost7.com/index.php
It's also a bit more complicated to grab the soundtrack id, though I might be looking in the wrong place.
Great code block by the way. Love it. 8)
It must something in the combination of either SMF or Tinyportal with the script and IOS.
Your demo site ( https://www.idesignsmf.com/index.php/page,youtube_video_carousel.html ) works fine on my IPhone :-\
Wonder if it's because TP uses a lower version of jQuery. I don't actually understand this stuff though or how it works, so probably barking up the wrong tree. I'm guessing the slider script calls the correct version directly.
I guess it is possible: we have had issues before with multiple Jquery calls in the same page. Also not my area of expertise...
Mike, that looks like a broken image path?
Quote from: Mick on December 26, 2019, 01:50:14 PM
Mike, that looks like a broken image path?
Thanks Mick. That's my problem though, not sure where to obtain the image path for a soundcloud track. Everything on their site appears to be encrypted. I must be lookin in the wrong place I guess. I could upload a custom one and point to it, but I thought it should pick something up from that site automatically.
Mike,... I don't use Soundcloud at all but did some digging for ya. It seems Soundcloud doesnt screentshot videos for video preview like YouTube does. So painfully one would have to screetnshot the artist and upload the pic to the server. I created a folder inside the unitegallery folder so I could add these pics.
Have a look at this code..
<img alt="Sound Cloud Track"
src="https://www.idesignsmf.com/Themes/pixel/unitegallery/vid-image-preview/godsmack.png"
data-type="soundcloud"
data-image="https://www.idesignsmf.com/Themes/pixel/unitegallery/vid-image-preview/godsmack.png"
data-trackid="252613001"
data-description="This gallery can play a soundcloud track">
Checkout the demo... last video on the carousel.
https://www.idesignsmf.com/index.php/page,youtube_video_carousel.html
Thanks Mick. Looks good. Shame it won't grab the images automatically, but that's not the end of the world. If I use this part of it I'll probably ask the owner for an appropriate image to go with their track. Great to see that it works though. 8)
Quote from: lurkalot on December 26, 2019, 04:44:42 PM
Thanks Mick. Looks good. Shame it won't grab the images automatically, but that's not the end of the world. If I use this part of it I'll probably ask the owner for an appropriate image to go with their track. Great to see that it works though. 8)
Sounds good ;)
Man! I could turn this thing into a mod. I did a slider mod for SMF years ago. Same concept. All entries made in admin. One could just paste the tiny script bit into a block for those that use portals while hiding the carousel from the boardindex itself. :hmm:
Quote from: Mick on December 26, 2019, 04:50:41 PM
Man! I could turn this thing into a mod. I did a slider mod for SMF years ago. Same concept. All entries made in admin. One could just paste the tiny script bit into a block for those that use portals while hiding the carousel from the boardindex itself. :hmm:
Mick, yes a mod sounds good for those who don't run a portal, or don't like doing things manually. I think something like this would make a nice plugin for TP as well, not sure how we'd do that though.
Hi, I'm late to the party :(
This looks fantastic Mick, great work. I read through all of the replies and see some kinks were worked out through trial and error. Is all of that reflected up to date in the code pen code? I think this would be really cool as a mod but would the mod be able to be used in HTML blocks maybe with a short code or something, or would you still have to manually write everything in the HTML in order for it to run properly?
Thank you!
Think that was the idea. A mod which can be used on a basic forum which will display the slider on forum index.
But if you use the mod on a forum running a portal you'd be able to set it not to display the actual slider on the forum index. Then you would put the given code in a block and display it where you want.
Having a mod will give you a interface to add the video urls, and it would upload the necessary slider script files to the correct places for you, instead of doing it manually like we did.
Personally I'd prefer not to install another mod, and just upload them manually, as it's only a one off thing. All video urls can be added in the block itself, like they are in the example you've seen on our test sites. More mods = more problems imo, especially when it comes to upgrades etc.
Good point. I would only be using exclusively on TP HTML pages. With that said, is all of the code on Mick's code pen up to date with modifications made that fixed the handheld issues?
Quote from: jernatety on December 30, 2019, 02:11:56 PM
Good point. I would only be using exclusively on TP HTML pages. With that said, is all of the code on Mick's code pen up to date with modifications made that fixed the handheld issues?
I can't answer the mobile compatibly question, because I only have a Android and windows phones to test on. Your best bet is to try it out if you have a iPhone
Grab the code from Micks site https://www.idesignsmf.com/index.php/topic,564.html and follow instructions, this is what I'm using, here, http://lts4.byethost7.com/index.php
Like Mick pointed out, I have an older slider mod where you can add all inputs in the admin interface. Ability to tun it off in the boadindex but still able to show it in blocks if one uses a portal using a small bit of code. Im cosidering making a mod but I too rather edit templates manually than uploading mods. In my own site I on ly use about 10 mods lol :P Everything else hand made. Also I cannot test on apple devices. I only own an Android and looks fine on well cross browsers too.