How to add Videos to 'Gallery and Videos' module

More
10 years 6 months ago #34198 by rachi_1977
Hi, I have gone into source code of this module and added the links to videos but I can't seem to figure out how or where the thumbnails to these video clips are created? At this point the Video section is still blank? I assumed there should be thumbnails here that when clicked, link to the video in my case on YouTube?

Here's the source code:
<div id="music-band-videos">
<div id="video_nav">
<ul>
<li><a title="Cover of Bruno Mars 'The Lazy Song'" onclick="goto2('#video1', this); return false" href=" www.youtube.com/watch?v=_wIG6dX4lqo " target="_self">Video 1
<li><a title="James Brown Tribute Show - The Funkadelic Side" onclick="goto2('#video2', this); return false" href=" www.youtube.com/watch?v=91-5S52he-g " target="_self">Video 2
<li><a title="Super Bad - James Brown Tribute Show - The Funkadelic Side" onclick="goto2('#video3', this); return false" href=" www.youtube.com/watch?v=TYmGAVmmMwo " target="_self">Video 3
<li><a title="Because you said so - Live Performance" onclick="goto2('#video4', this); return false" href=" www.youtube.com/watch?v=-oWehEkaQA4 " target="_self">Video 4
</ul>
</div>
<div id="video_content">&nbsp;</div>
</div>

Please Log in to join the conversation.

More
10 years 6 months ago #34222 by ivan.milic
You need to configure your editor plugin (TinyMCE is joomla default) to allow iframe tag which is banned by default.

Please Log in to join the conversation.

More
10 years 6 months ago #34241 by rachi_1977
So I have gone into the custom HTML code and followed your advice but the videos are stacked on top of each other and are nothing like how videos are displayed on your demo site.

Here is my source code:

<p>Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio.</p>
<div id="pics_video">
<ul>
<li><a href="#music-band-pics">Pic</a></li>
<li><a href="#music-band-videos">Video</a></li>
</ul>
<div id="music-band-pics">
<div id="gallery_nav">
<ul>
<li><a class="active" href="#" onclick="goto('#slide1', this); return false">Slide 1</a></li>
<li><a href="#" onclick="goto('#slide2', this); return false">Slide 2</a</li>
<li><a href="#" onclick="goto('#slide3', this); return false">Slide 3</a</li>
<li><a href="#" onclick="goto('#slide4', this); return false">Slide 4</a></li>
<li><a href="#" onclick="goto('#slide5', this); return false">Slide 5</a></li>
</ul>
</div>
<div id="gallery_content">
<div class="contentbox-wrapper">
<div id="slide1" class="contentbox">{photogallery}images/pics/slide1{/photogallery}</div>
<div id="slide2" class="contentbox">{photogallery}images/pics/slide2{/photogallery}</div>
<div id="slide3" class="contentbox">{photogallery}images/pics/slide3{/photogallery}</div>
<div id="slide4" class="contentbox">{photogallery}images/pics/slide4{/photogallery}</div>
<div id="slide5" class="contentbox">{photogallery}images/pics/slide5{/photogallery}</div>
</div>
</div>
</div>
<div id="music-band-videos">
<div id="video_nav">
<ul>
<li><iframe width="560" height="315" src="//www.youtube.com/embed/_wIG6dX4lqo" frameborder="0" allowfullscreen="true">
<li><iframe width="560" height="315" src="//www.youtube.com/embed/-oWehEkaQA4" frameborder="0" allowfullscreen="true">
<li><iframe width="560" height="315" src="//www.youtube.com/embed/91-5S52he-g" frameborder="0" allowfullscreen="true">
<li><iframe width="420" height="315" src="//www.youtube.com/embed/TYmGAVmmMwo" frameborder="0" allowfullscreen="true">
</ul>
</div>
<div id="video_content">&nbsp;</div>
</div>
</div>

Clearly there is more needed to be done here to have the videos display the same as your demo? Do you have a backend login to the demo site so I can see how you have set this up? Or please reply with a step by step guide on how to set up the videos so they show exactly like your demo.

Please see my attachment to see how my videos are incorrectly displaying.
Attachments:

Please Log in to join the conversation.

More
10 years 6 months ago #34246 by ivan.milic
which our demo page you refer?

Please Log in to join the conversation.

More
More
10 years 6 months ago #34249 by ivan.milic
Note following part(as on our demo):
Code:
... <div id="video_nav"> <ul> <li><a class="active" onclick="goto2('#video1', this); return false" href="#">Video 1</a></li> <li><a onclick="goto2('#video2', this); return false" href="#">Video 2</a></li> <li><a onclick="goto2('#video3', this); return false" href="#">Video 3</a></li> <li><a onclick="goto2('#video4', this); return false" href="#">Video 4</a></li> <li><a onclick="goto2('#video5', this); return false" href="#">Video 5</a></li> </ul> </div> <div id="video_content"> <div class="contentbox-wrapper-video"> <div id="video1" class="contentbox"> <iframe width="640" height="360" src="//www.youtube.com/embed/PvwqSMRtoSI" allowfullscreen=""></iframe> </div> <div id="video2" class="contentbox"> <iframe width="640" height="360" src="//www.youtube.com/embed/x6XBlkvTmv8" allowfullscreen=""></iframe> </div> <div id="video3" class="contentbox"> <iframe width="640" height="360" src="//www.youtube.com/embed/tGc8jL4dzao" allowfullscreen=""></iframe> </div> <div id="video4" class="contentbox"> <iframe width="640" height="360" src="//www.youtube.com/embed/RMBVzcjPiyo" allowfullscreen=""></iframe> </div> <div id="video5" class="contentbox"> <iframe width="640" height="360" src="//www.youtube.com/embed/IPSYplu_3fA" allowfullscreen=""></iframe> </div> </div> </div> ...

Please Log in to join the conversation.

Time to create page: 0.304 seconds
Powered by Kunena Forum