Embedding Audio and Video Files from Google Drive into Blogger

I cannot take credit for what I am about to write.  The credit goes to one of my students in Music Tech class, Ryan Boelk, for coming up with this method.  He figured it out on his own after Soundcloud tagged one of his music uploads as containing third-party material (read my article "It's Not Fair" for more information on this issue.)  I'm writing about it here because I haven't tried it yet even though I have encouraged my students to try this method.  It's like the scientists who said that they invented cold fusion but no other scientists were able to replicate their methods.  I'm not only trying to replicate Ryan's methods, but also understand and improve on them.

Ryan's method for using Google Drive as a host for embedding music or videos into Blogger is as follows:

1. Upload an audio or video file to your Google Drive.
2. Once it's uploaded to Google Drive, click the Share button.
3. Set sharing to "Public" for the widest audience.
4. Copy that public sharing link. (e.g. https://drive.google.com/file/d/0B-Wtebd6y4ISeWZPMHdSellFclU/view?usp=sharing)
5. Paste that link into the HTML side of a new Blogger post.
6. Copy the "garbage" from the middle of the link (highlighted in green above)
7. Paste the "garbage into the green portion of this HTML code: 
8. Make sure it works by switching back to the Compose side and pressing the play button.

Ryan Boelk's HTML code for embedding an audio file from Google Drive :

<center><iframe height="100" src="https://docs.google.com/a/wlavikings.org/file/d/Place the "garbage" here/preview" width="300"></iframe></center>

My replication and modification of Ryan's Method for Audio and Video

This is the second audio file I tried to embed. The first one I tried, Jason Aldean's "Hicktown", showed an embedded audio player but it had no sound when the play button was pressed. I'm not sure why. My thought was that the MP3 file was nested a couple of folders deep on my Google Drive, so I went looking for an MP3 file on the root level of my drive. That one, my own arrangement for orchestra, chorus, and congregation for the 2002 WELS National Conference on Worship, Music, and the Arts from the of the hymn "The Tree of Life" worked.

So I started to play with the height and width parameters.  Ryan specified height = 100 and width = 300, but it seemed to give too much grey space for my liking above and below the audio transport controls and squished the transport so that play time and volume controls were on top of each other (as shown below), so I modified the numbers to height=60 and width = 450 (as shown above).  That also keeps the popout window button off of the transport controls.

I would love to be able to put a title or a caption on this embedded audio file, such as you can automatically do on a picture in Blogger. I'm doing some reading on HTML <caption> tags.  Hopefully, with a little experimentation, I'll figure it out. Now for video.  After uploading a Garageband edited commercial soundtrack to my Google drive, I followed the same steps as in 1-8 above to embed the video into this article from Google Drive.  To my joy, it worked the first time.  It makes me wonder if the video link button on the editing toolbar in Blogger wouldn't do the same thing.  So, I tried it.  The video button allowed me to upload a video from my computer straight to this article.  It's the second video below (and the original 1st generation iPod commercial on which this project was based). Video uploaded to Google Drive and embedded here using Ryan's method. Soundtrack music replaced with Cyndi Lauper's "Girls Just Wanna Have Fun" Video uploaded straight to Blogger using the video button on the editing toolbar. Original 1st Generation iPod Commercial Video

Conclusion

In order to bypass copyright restrictions on Youtube or Soundcloud for education fair use applications, Google Drive can be used to host both audio and video files.  Embedding audio and video files from Google Drive is possible using an adaptation of an embed code from Google Docs.  The key to modifying the embed code is to paste a portion of the shared URL into an <iframe> HTML embed code as described above.  Audio files