How to work with youtube videos on web page

How do I add youtube videos within a css grid so the video thumbnails fit mobile? Why does “share” code use an iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/GpB-mvDzCdg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

Hi @kat,
So the IFrame is the easiest way to embed a video on your page. They also have an api that lets you load the videos in programmatically. There are also some ways to add videos for mobile apps.

I haven’t tried adding iframes into a grid. They should work, but…

As to thumbnails, YouTube creates thumbnails for each video. To get these thumbnails use the URL https://img.youtube.com/vi/VIDEOID/#.jpg. Where the video id is the id number of the video from the URL bar at the top - should be around 11 characters and a mix of letters and numbers, maybe underscores or hyphens. The hash at the end should be replaced with 0, 1, 2, or 3. Different thumbs at different sizes. You will have to use Javascript to flow them or use a JS library like Lazytube.

Cheers,
Bob

2 Likes

Watched programmatically.
Embed seems their newest option.
You’re right, css grid works fine with youtube, but size too big.

  1. What do I need to make iframe smaller?
    iframe { width: 100%; }
  2. Any way to use filters on iframe, or just background image?

Is this the correct lazytube - jquery.lazytube.min.js
Also how do I get rid of the top & bottom black bar?

Hi @kat,
There are a lot of different versions of lazytube. You’ll have to look at the documentation a bit, but I’m thinking the black bars are probably because you are stretching the thumb to be wider than it is high and the lazytube library might add them. Not really sure.
Good Luck!
Bob

1 Like

This eliminates the black bars
http://img.youtube.com/vi/<insert-youtube-video-id-here>/mqdefault.jpg


Q: Will I need both jquery.lazytube.min.js & jquery.lazytube.js?

Hi @kat,
Glad you solved it!
Both those libraries are essentially the same. One has had the code minified to make it load faster, so you only need the .min file
Bob

Help with my Lazytube please. I’m way off.

        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="description" content="">
        <meta name="author" content="">
        <title>New page</title>
        <link href="css/style.css" rel="stylesheet">
        <link href="bootstrap_theme/bootstrap.css" rel="stylesheet" type="text/css">
        <script src="bootstrap/js/bootstrap.min.js"></script>
        <script src="assets/js/jquery.lazytube.min.js"></script>
        <script src="assets/js/jquery.lazytube.js"></script>
        <script type="text/javascript">
            jQuery(document).ready(function($) {
                $('.demo').lazyTube();
            });
        </script>
    </head>
    <body>
        <nav class="pg-empty-placeholder"></nav>
        <section class="videos">
            <div data-id="cMyqFLqgSMU" class="demo"></div>
            <div data-id="XlaW3BX1jDs" class="demo"></div>
            <div data-id="JbXzWSNa03U" class="demo"></div>
            <div data-id="Um8JxkWvL3k" class="demo"></div>
            <div data-id="RVYeGkbSFEw" class="demo"></div>
            <div data-id="advp07n589o" class="demo"></div>```

Hi @kat,
Not sure how quickly I will get to this - a bit busy right now and it isn’t really Pinegrow related. At first blush, you are going to have jQuery loaded before the lazytube, you should only have one lazytube library loaded, and I’m not sure if the lazytube library can deal with a selector that will return multiple elements or if there is something more you need to do.
Cheers,
Bob