This can be achieved with a single line of code that you can add anywhere on your web page. The trick is that you embed a regular YouTube video (with autoplay=1) and set the height & width of the video player to zero so the embedded IFRAME element stays invisible. They mostly used raw audio files, like MP3, WAV or even the MIDI format, to embed music but you can even use any of your favorite YouTube tracks for embedding background audio. Accessibility concerns Videos should provide both captions and transcripts that accurately describe its content (see Adding captions and subtitles to HTML video for more information on how to. Remember the Geocities era when websites would automatically play background music as soon as you opened them much to the embarrassment of office workers. A relatively simple example is video/webm codecs'vp8, vorbis', which says that the file is a WebM video using VP8 for its video and Vorbis for audio. Embed Background Music with YouTube Audio The downside is that your background video won’t work on mobile devices and it is not possible to mute the sound of a video without using JavaScript. Also, the z-index is set to negative so the YouTube video layer will appear several levels below the main content of your page. Internally, we are using YouTube’s IFRAME tags to embed that video such that it occupies the entire page (both width and height are set to 100%). Replace ID with the actual ID of your YouTube video You should also replace the ID with the actual video ID of the YouTube video that you would like to use in the background. To get started, simply paste the code below near the opening tag of your web template. The other more simple approach, as you can see in this demo, uses HTML and CSS tags (no JavaScript) to help you place any YouTube video in the page background. • There are ready-to-use jQuery plugins, Tubular and BigVideo.js for example, that let you easily use any video, or a series of videos, as page backgrounds. A responsive background video can be added from the system collection as well as a YouTube video can be added in HTML CSS via the
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |