Home Forums Air HTML Theme Video in Lightbox

This topic contains 6 replies, has 2 voices, and was last updated by  floodout 3 weeks, 5 days ago.

Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #13707

    floodout
    Participant

    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

    #13710

    BWSM
    Keymaster

    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!

    • This reply was modified 1 month ago by  BWSM.
    #13739

    floodout
    Participant

    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>

    #13741

    floodout
    Participant

    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

    #13754

    BWSM
    Keymaster

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

    #13758

    floodout
    Participant

    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><!--End list-layout-inside--> 
                                                        </div><!--End list-layout-item-->
                                                        </div>
    • This reply was modified 3 weeks, 5 days ago by  floodout.
    • This reply was modified 3 weeks, 5 days ago by  floodout.
    #13761

    floodout
    Participant

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

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

You must be logged in to reply to this topic.