Joomla Templates Club 406,261 posts

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#197641

Hello,
Great job on the JA Decor. what an amazing theme.

Just 2 small things I have.

1) I have replaced the video-cover image with mine, but now I can not see the play button any more.
in your demo: http://www.joomlart.com/demo/#ja_decor
when the mouse over the image there is small white play icon shows.
please see the attached image p.PNG

2) when someone open the video it opens in a full page popup.
1- I would like to change the page background to black
2- X mark, I would like to change it to white color.
In this way people will think this is a part of the theme. now the white page indicates that its new page and people may close the browser.

3) can I use vimo video there instead the ugly youtube player.

Thank you.

---

Attachments:

1. 
2. 

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#534820

@okkhalid,

This is a custom HTML module so before adding content into this module, please try going to Global configuration in backend and turn off Default Editor first. Because default editor oftens strips tags in the content.

Here is content in demo site:


<div class="video-wrapper grid-2x2">
<img class="video-cover" src="images/joomlart/demo/video-cover.jpg" alt="" />
<a class="video-play-icon" href="#"><i class="fa fa-play-circle-o"></i></a>
<iframe width="560" height="315" src="//www.youtube.com/embed/nz7sxt9xeJE" frameborder="0" allowfullscreen></iframe>
</div>


Regarding the popup, you can create a new css file called custom.css in this path: /templates/ja_decor/css. In order to change the background color, you add this css rule into this ‘custom.css’ file:


#iframe-video-wrap {
background: #000 !important;
}


To change the color of the ‘X’ close button, you add this rule:


#iframe-video-wrap .btn {
color: #fff !important;
}


And yes, you can use Vimeo video, just add the embeded video code into content of module, for example:


<div class="video-wrapper grid-2x2">
<img class="video-cover" src="images/joomlart/demo/video-cover.jpg" alt="" />
<a class="video-play-icon" href="#"><i class="fa fa-play-circle-o"></i></a>
<iframe src="//player.vimeo.com/video/83583742" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/83583742">Disclosure | Grab her</a> from <a href="http://vimeo.com/divisionparis">DIVISION</a> on <a href="https://vimeo.com">Vimeo</a>.</p>
</div>

[okkhalid Friend okkhalidJoin date: November 2012Posts: 229Downloads:2Uploads:133 Thanked: 3 times in 1 posts]

#534938

Great thank you million. it worked. 🙂

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#534998

Glad it helped 🙂

[msilac Friend msilacJoin date: October 2010Posts: 548Downloads:2Uploads:74 Thanks: 115 Thanked: 5 times in 1 posts]

#537370

Is there a chance that this video pop up in floatig window, not in new window…

like this for example: https://play.google.com/store/apps/details?id=com.sudsoftware.floatingyoutubepopupplayer

Thank you

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#537553

I’m afraid that you must customize the code or using 3rd party extension for popup there.

At this moment, you can add some css style for the popup view:


#iframe-video-wrap {
width: inherit;
height: auto;
top: 300px;
left: 400px;
}


then change to the value as you wish.

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#542457

…and guys!
What is the magic to get it played in fullscreen (or even in its best resolution e.g. 480p instead of 360p)?
rel=0 would do the job but not working for me.
&hd=1 may set HD if there is but does not work with 360p to get 480p
autoplay is the only trick what is working…
http://www.youtube.com/embed/x1x2x3?rel=0&autoplay=1
Here I found some hints but…

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#542533

In this custom HTML module, it embeded video in iframe, you can try to set the size for the video: http://prntscr.com/436jtb

1 user says Thank You to Saguaros for this useful post

1. palos

[palos Friend palosJoin date: January 2013Posts: 369Downloads:37Uploads:8 Thanks: 125 Thanked: 27 times in 7 posts]

#542561

I am afraid that if I give exact dimensions it will show just a part on a 120*160 feature phone 😉
Ok, seriously it will not be responsive but would also show just a part on smaller screens… right?
I was thinking of a simple way not js what may solve it.

[Saguaros Moderator SaguarosJoin date: September 2014Posts: 31405Downloads:237Uploads:471 Thanks: 845 Thanked: 5346 times in 4964 posts]

#542918

In mobile view, you can use media jQuery to add specific style for the iframe like below workaround:
– Go to file: /templates/ja_decor/css/custom.css (if this file doesn’t exist, you can create it).
– Add this css rule:

@media screen and (max-width: 768px) {
#iframe-video-wrap .video-container > iframe {
width: 100%;
}


[Author]

Posts