Topic: Video in Lightbox « SeaTheme

This topic has 6 replies, 2 voices, and was last updated 8 years, 7 months ago by floodout.

Viewing 7 posts - 1 through 7 (of 7 total)

Author

Posts
October 20, 2017 at 1:45 am #13707

floodout
Participant

Purchased
Expired

Hello, how do i show a video item into my project listing, I want it to go after the main image on the left and be able to view it in lightbox also. Thanks:

http://helenneville.com/hidden/O2email.html

WordPress Customization Service from $49 Only! Save your expensive time!

October 20, 2017 at 3:04 am #13710
SeaTheme
Keymaster

Purchased
Expired
Hi,

The html wrap for video in lightbox is like:
```
<a title="" class="lightbox-item grid-item-mask-link" href="xxxx.jpg" data-size="2742x1486" data-type="video"><img class="lightbox-img-hide" width="2742" height="1486" src="xxx/blank.gif" alt="xxx" title="xxx" />
    <div class="hidden">
      <div class="videoWrapper video-wrap video-post-wrap video-16-9" style=" padding-top:75%"><iframe src="https://player.vimeo.com/video/xxxx" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
    </div>
</a>
```
Please don’t forget the data-type="video" in a tag.

download & replace the js/custom.theme.js.

Regards!
WordPress Customization Service from $49 Only! Save your expensive time!

October 23, 2017 at 8:30 am #13739

floodout
Participant

Purchased
Expired

Hello,

I followed your instructions, but I had to hack things to make it work. I don’t want to show a jpg before you enter the lightbox, I want to show the actual video. So my code is very all over the place. Could you please help me clean up the code? It is the last item at the bottom of screen here:

http://www.helenneville.com/hidden/Dannii.html

or here:

<div class=”list-layout-col list-layout-col1 clearfix”>
<div class=”list-layout-col1-item list-layout-item” style=””>
<div class=”list-layout-inside”>
<div class=”single-image mouse-over” data-lightbox=”true”>

<div class=”hidden”>
<div class=”videoWrapper video-wrap video-post-wrap video-16-9″ style=” padding-top:75%”><iframe src=”https://player.vimeo.com/video/144706418″ width=”640″ height=”360″ frameborder=”0″ webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe></div>
</div>

<div class=”videoWrapper video-wrap video-post-wrap viemo” style=” padding-top:3%”>
<iframe src=”http://player.vimeo.com/video/144706418?title=0&byline=0&portrait=0&autoplay=0″ width=”640″ height=”360″ data-size=”640×360″ data-type=”video”></iframe>
</div>

</div>
</div><!–End list-layout-inside–>
</div><!–End list-layout-item–>
</div>

WordPress Customization Service from $49 Only! Save your expensive time!

October 23, 2017 at 8:53 am #13741

floodout
Participant

Purchased
Expired

This is an example of what I want to do, in terms of displaying the videos, one after the other:

http://www.helenneville.com/hidden2/thevoice.html

Thanks

WordPress Customization Service from $49 Only! Save your expensive time!

October 24, 2017 at 2:35 pm #13754

SeaTheme
Keymaster

Purchased
Expired

There is not the solution to show embed video in both image list and lightbox.

WordPress Customization Service from $49 Only! Save your expensive time!

October 25, 2017 at 1:13 am #13758
floodout
Participant

Purchased
Expired
Okay, could you please give me a solution just to show the video in the page, not in the light box. So that it fits nicely under the other project items?

Fo example, what code would i use for it to sit under this project item?
```
<div class="list-layout-col list-layout-col1 clearfix">
                                                    <div class="list-layout-col1-item list-layout-item" style="">
                                                        <div class="list-layout-inside">
                                                            <div class="single-image mouse-over" data-lightbox="true">
                                                                <a title="" class="lightbox-item" href="img/portfolio/Dannii/Dannii.jpg" data-size="666x1000">
                                                                    <span class="ux-lazyload-wrap" style=" padding-top: 150.150%;">
                                                                        <img src="img/blank.gif" data-src="img/portfolio/Dannii/Dannii.jpg" width="666" height="1000" class="list-layout-img gallery-images-img ux-lazyload-img lazy">
                                                                    </span>
                                                                </a>
                                                            </div>
                                                        </div> 
                                                    </div>
                                                    </div>
```
WordPress Customization Service from $49 Only! Save your expensive time!

October 25, 2017 at 1:54 am #13761

floodout
Participant

Purchased
Expired

Don’t worry about this request anymore, i am going to figure it out myself. Thankyou

WordPress Customization Service from $49 Only! Save your expensive time!
Author

Posts

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.