Tagged: ,

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

    Hi
    I’m trying to make a portfolio grid of YouTube videos and been searching these forums for hours without any luck
    How is the best way to setup it up?

    I know I need to define a custom link and overwrite the portfolio link settings
    Then I then insert the same video source in the preview text
    But do I need to add an thumbnail manually…can’t I get it to grab the thumbnail automatically from YT?
    Also it only seem to work in a lightbox and not in the preview ajax, as it then opens a black preview windows and a lightbook in front of that

    I would like it to open in a preview window and play in that…not in a light box

    #1067571

    may i ask why it has to be a portfolio grid?
    you want to link to youtube itself or in a lightbox?

    #1067580

    If you got f.e. a masonry gallery from media elements – you can define each a custom link
    the lightbox linking is active on that – use flexible masonry and you can use the effects on the images too!
    click to enlarge – see right side of each image there is a custom link field !!
    You can use each image you like – because we will substitute it by the embeded youtube still image.

    See here : https://webers-testseite.de/youtube-videotestseite/

    Beneath you can see the jqeuery code to substitute the image with the youtube mq image

    you only need this (i did it only for that page – if you like to have it on all pages get rid of if-clause):
    in child-theme functions.php

    function youtube_fix(){
    if (is_page(33150)){
    ?>
    <script>
    (function($){ 
      
      $('a.av-masonry-entry[href*="youtube"]').each(function() {
          regex = /(?:youtube(?:-nocookie)?\.com\/(?:[^\/\n\s]+\/\S+\/|(?:v|e(?:mbed)?)\/|\S*?[?&]v=)|youtu\.be\/)([a-zA-Z0-9_-]{11})/;
          var ID = $(this).attr("href").match(regex)[1];
          $(this).find('img').css('width', '100vw ').attr({
            'src': 'https://img.youtube.com/vi/'+ ID +'/mqdefault.jpg',
            'title': 'Youtube Video ID: '+ ID ,
            'alt': 'youtube-image-'+ ID ,
          });
        });
      
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'youtube_fix');

    one thing to mention: use the https://www.youtube.com/watch?v=ID Link

    #1067582

    ok – it must work this way.

    By the way if you do not choose flexible masonry – the selector will be a different one ( and the img gets a background-img etc. )

    #1067923

    did someone know how to get the youtube title from the ID and put in that code above for each video ?

    #1067974

    i would recomend you to install a plugin for this purpose, I have made good experiences with YoTuWP.
    there is a free version.
    See here a little Demo on my page: https://webers-testseite.de/youtubeplayer/
    You can have single Video or multiple Video or as input your channel etc.

    #1068129

    Hi,

    Thanks for sharing and helping out @guenni007 :-)

    Best regards,
    Rikard

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

You must be logged in to reply to this topic.