adrienjoly/free-youtube-art-track-tutorial.md

## free-youtube-art-track-tutorial.md

      
    Raw
  

              free-youtube-art-track-tutorial.md
            
          
    Create a YouTube Art Track using HTML, CSS and ffmpeg

This may be more of a recipe than a tutorial, but let me just share the steps I followed to generate YouTube Art Track for my band, using intermediate computer skills.
Motivation

As a musician, sharing your music on YouTube is a must. But YouTube is a video platform, and making a music video to go with a song can be costly and time consuming. Several web services propose to generate a nice looking video out of your MP3 file, and to upload the result directly to your YouTube account, but this would cost you $30 per song in HD quality.
Expected output

We target a fixed image with the following layout, to be displayed while the track is playing from youtube.com:
 ________________________
|  _________             |
| |         |            |
| |  cover  |  Title     |
| |   art   |  Artist    |
| |_________|            |
|________________________|

Recommendations from YouTube

In order to make sure that the quality of the final video will be optimal, let's see what YouTube recommends in terms of video definition and encoding formats.
Recommended formats


MP4 file
Audio: AAC-LC, 96 kHz or 48 kHz, ~384 kbit/s (for Stereo)
Video: H.264, Variable bitrate, chrominance: 4:2:0
Video definition: 2560 x 1440 (for 1440p), with 16:9 aspect ratio

Step 1. Generate the image


Fork this Codepen: https://codepen.io/adrienjoly/pen/GXKQYj?editors=1100
In the HTML panel, change the track info to put your own
In the CSS panel, change the URL of your cover art
From the bottom-right corner of Codepen, export to a ZIP file
Extract the ZIP file and open the HTML file in full-screen
Take a full-screen screenshot into a PNG file (i.e. on a Mac with retina display, Cmd-Shift-3 should generate a 2560 x 1440 screenshot)

Step 2. Generate the video

Run the following command to generate a YouTube-ready video from the Tierra.png screenshot and the Tierra.wav audio track:
$ ffmpeg -loop 1 -i Tierra.png -i Tierra.wav -c:v libx264 -tune stillimage -c:a aac -b:a 384k -pix_fmt yuv420p -shortest Tierra_out.mp4

If you don't have ffmpeg on your system, install it.

Note: I let YouTube crop my image to its own definition. If you want to crop it yourself, follow: https://www.oodlestechnologies.com/blogs/Crop-and-scale-image-using-ffmpeg.

Step 3. Upload to Youtube

The last step is the most obvious one: go to youtube.com/upload, and drop your video there. (e.g. Tierra_out.mp4, in my case)
Enjoy! And good luck with the promotion of your music!