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.
- What do I need to make iframe smaller?
iframe { width: 100%; } - 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
https://mcgraphics.us/poets/youtubeTest.html
- How do I get the grid to take up 3 columns
- How do I make the play arrow icon accessible
- Correct order for css & js below
<head> <meta charset="UTF-8"/> <meta http-equiv="X-UA-Compatible" content="IE=edge"/> <link href="css/theme.css" rel="stylesheet" type="text/css"/> <link rel="stylesheet" href="youtubeTest.css"/> <link rel="stylesheet" href="FastEmbed.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="FastEmbed.js"></script> <meta name="viewport" content="width=device-width, initial-scale=1.0"/> <title>Youtube Gallery</title> </head>
Hi @kat,
- think logically about what you are asking the browser to do. Right now you have a structure like this:
container section
gallery div
video
video
video
You grid CSS is applied to the container. So you are asking the browser to place all of the direct children of the container section - which would be the gallery div - to be distributed between the three grid regions. Since you only have one gallery div, it and all of it’s videos are placed in the first grid region. Instead, you want the CSS grid added to the gallery div, that way all of the videos will be divided between the three grid regions.
- I’m not sure what you mean by
Do you mean for ally, or for CSS, or …?
- Your CSS and script order seem fine. I would guess that jQuery should be before the FastEmbed.js. The only thing might be if you make custom changes to the elements styled in the FastEmbed.css. In that case you would want your theme.css loaded last.
Cheers,
Bob
1 Like
You mean you want it to be responsive?
Well, looking at the CSS, they are put in using ::before for the circle and ::after for the arrow. Both are constructed using border width, margin, and for the circle radius. Basically you have to create a new circle/arrow that over-rides in your theme css. To get it to over-ride you need to make sure your custom CSS is loaded after the FastEmbed.css file.
Bob
1 Like
Both the video and the circle arrow are responsive, filling a grid area as the screen gets smaller. But I need the circle/arrow to get smaller relative to the video. How do I make this happen?
Is ::before for the circle and ::after for the arrow on the same level as the video, rather than being within the video?
Hi @kat,
Just as a matter of terminology - the play symbol is not responsive. It remains the same size no matter the screen size, it is the box with the image/grid area that gets smaller, making it seem like the play button is getting bigger.
The ::before and ::after are both being applied to the .youtube class. Basically the JS library makes a div with that class for each video. You might need to read up a little on the before and after pseudo-elements. I would also encourage you to make more use of the DevTools of your browser to explore the page in a browser. It will make it easier to see “where” these elements are in your HTML. It will also allow you to see exactly what those stylings are. You should also be able to see them in the Style panel in Pinegrow, but they may be hidden by default.
Cheers,
Bob
1 Like
Great suggestions. I watched a video on Firefox tools and learned a lot. So cool how you can find out what’s going on and what to do about it.
I can’t break myself from the Chrome habit, but I actually like the layout of the Firefox DevTools better.
A lot of this same CSS info can be obtained from the Pinegrow Styles panel. It is just nice to see how the browser interprets it sometimes.
1 Like
@media screen and (max-width) set to 556px for 1fr and 2fr for 776px solved the “play arrow/circle” resize issue.
Do I need smoother breakpoint transitions from 1 size to another? And if so do you or @matjaz have a tutorial for that?
I guess the question is, how often do you expect your end user to resize between those two breakpoints? Do you expect mobile users where phones get rotated a lot? Overall, except for the rotation, I don’t expect users to constantly change screen sizes. Even if they do, just getting the content to fit to the new size is usually enough. IMO
1 Like