How Print My Blog Makes YouTube Videos Look Good When Printed, and You Can Too

Print My Blog 1.12.0 makes posts and pages printed with embedded YouTube videos look much better than in standard printouts. In this post I’ll describe the problem with printing videos, how the WordPress Plugin Print My Blog solves it, and how you can replicate it in your posts.

The Trouble Printing Posts with YouTube Videos

Traditionally, YouTube videos in printouts (paper, PDF, eBook, etc) have looked pretty bad. I’ll show you what I mean.

Here’s a sample blog post with an embedded YouTube video (created with WordPress 5.2, using the twentyseventeen theme) as viewed from Firefox

But this is how it looks when printing from Firefox:

That black box is the video.

The main problems are:

1. There is no way to actually watch the video
2. You can’t read the video’s title
3. It looks buggy (like the site owner never thought someone would try to print the page, which is probably right!)
4. That black area uses up a ton of ink, especially if you’re going to print an entire blog (which is the entire point of Print My Blog)

You can improve things slightly in Firefox by choosing to hide background colors (in the print page setup options), or use Google Chrome. Both options will lead to a printout that looks more like this:

A slight improvement, that fixes issue 4 (a solid white background uses less ink than a solid black background). But that’s about it. It still doesn’t help you actually watch the video, know its full title (it got clipped), and looks a bit buggy.

Showing YouTube videos in printouts is really so bad that services like Print Friendly opt to just totally remove them, preferring a confusingly empty space.

Print My Blog and YouTube Videos

The Old Way They Were Shown

Before version 1.12.0, Print My Blog didn’t do any better at printing videos. They weren’t helpful, didn’t reliably say they’re name, and looked buggy.

Here’s a Print My Blog 1.11.2 printout, (using the option to divide the content into 3 columns):

It has all the same problems as when printing normally.

The New Way They’re Shown

In version 1.12.0, Print My Blog now prepares embedded YouTube videos to make them more useful and look better. I’m no designer, and am still receiving user feedback, but take a look:

Specifically,

1. It prints the URL of the video, so you know where to find it and watch it
2. The full title is shown
3. The video’s default screenshot is shown
4. Because it’s an image in the printout, Print My Blog lets you resize it or remove it entirely (like all images)

Not-so-coincidentally, it solves the 4 original problems I mentioned above with printing YouTube videos 😎.

How To Manually Make Embedded YouTube Videos Look Good

What if you’re not on WordPress and can’t use Print My Blog? Here’s how you can manually prepare your post to do the same thing. It’s a bit technical so feel free to skip if that’s not your jam.

Let’s say your post contains the following HTML for the embedded YouTube video:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ngId20fP5I8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

First off, you’re going to need to find the video’s YouTube ID, which is pretty easy. If the URL to your video is https://www.youtube.com/watch?v=ngId20fP5I8, it’s the part after v=, so ngId20fP5I8. You’ll need that next.

The HTML you would add would look like this, replacing {{title}} and {{youtube id}} with the video’s title and YouTube ID.

<div class='youtube-video-print'><b>{{title}}</b><a href="https://www.youtube.com/watch?v={{youtube id}}">https://www.youtube.com/watch?v={{youtube id}}</a><img src="https://img.youtube.com/vi/{{youtube id}}/maxresdefault.jpg"></div>

Notice you’re using the YouTube ID three times there: twice for a URL to the video, and once to get the screenshot of a the video.

For my example, my HTML would be:

<div class='youtube-video-print'><b>How to Use Google Chrome and Print My Blog to Create a PDF of your Blog</b><a href="https://www.youtube.com/watch?v=ngId20fP5I8">https://www.youtube.com/watch?v=ngId20fP5I8&t=131s</a><img src="https://img.youtube.com/vi/2zrDtEP4mcw/maxresdefault.jpg"></div>

Next, add that beside the original iframe HTML.

Also, class='youtube-video-web' onto the iframe tag.

And lastly, let’s make the CSS. You can add it to a separate CSS file, or add it inline like so:

<style>
@media print{
    .youtube-video-web{
        display:none;
    }
}
@media screen{
    .youtube-video-print{
        display:none;
    }
}
</style>

That says that when the content is being shown on printed media, hide the iframe; when it’s being shown on a screen, hide the print div.

So the final HTML would be:

<iframe class='youtube-video-web' width="560" height="315" src="https://www.youtube.com/embed/ngId20fP5I8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<div class='youtube-video-print'><b>How to Use Google Chrome and Print My Blog to Create a PDF of your Blog</b><a href="https://www.youtube.com/watch?v=ngId20fP5I8">https://www.youtube.com/watch?v=ngId20fP5I8&t=131s</a><img src="https://img.youtube.com/vi/2zrDtEP4mcw/maxresdefault.jpg"></div>
<style>
@media print{
    .youtube-video-web{
        display:none;
    }
}
@media screen{
    .youtube-video-print{
        display:none;
    }
}
</style>

Conclusion and Ideas to Improve

So that’s how Print My Blog makes YouTube videos more useful and look better in printouts.

One improvement I’m considering is adding QR codes beside each YouTube video when printing. That way a reader of the printout could scan the QR code with a phone, which would make it immediately open the link to YouTube, rather than require them to manually copy the entire URL. That would be pretty easy to add, but I don’t want to bother with that unless users express interest.

So, do you think adding QR codes to the YouTube videos would be helpful? Any other suggestions on how to better show YouTube videos in printouts?

Thanks for reading and best wishes preserving your blog!