Audio/Video embed to Blogger cheatsheet

Reference page to copy/paste HTML code for making fast posts with audio/video elements.

Audio

Note:
* remember to change dl=0 to dl=1 at end of the dropbox URL.

(Title and player)

<br /><div align="center">Title
<br /><audio preload="none" controls="controls" height="50px" width="100px">
<source src="PUTyourURLtoMP3fileHERE
" type="audio/mpeg"></source>
<embed height="50px" width="100px"></embed> </audio></div><br /><br />

---

(With download link)

<br /><div align="center">Title
<br /><audio preload="none" controls="controls" height="50px" width="100px">
<source src="PUTyourURLtoMP3fileHERE
" type="audio/mpeg"></source>
<embed height="50px" width="100px"></embed> </audio><br />
<a href="PUTyourURLdownloadHERE">Download</a></div><br /><br />

---

(With download link in title)

<br /><div align="center"><a href="PUTyourURLdownloadHERE">Title
</a><br /><audio preload="none" controls="controls" height="50px" width="100px">
<source src="PUTyourURLtoMP3fileHERE
" type="audio/mpeg"></source>
<embed height="50px" width="100px"></embed> </audio></div><br /><br />

Video

<style>.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }</style>

<br><div class='embed-container' align="center"><iframe preload="none"  allowfullscreen frameborder='0' src='https://drive.google.com/file/d/
PUTyourIDtoVIDEOfileHERE
/preview' ></iframe></div><br><br />


Note:
* Don't copy paste the entire URL to the video file. Just the random letters ID part.
* Adding the style is necessary once per page (or one time if you edit the CCS of the blog.) Blogger will remove extra copies of that HTML code automatically. Its purpose is to make the frame compatible with phones and other mobile devices.
* You can use the class='embed-container' tag for any media element that doesn't resize properly.