Incorporating Multimedia into a Responsive Website
Many types of multimedia are supported in responsive design, assuming the css is setup properly. I have incorporated images, a video, a slideshow presentation, an audio track, and motion graphics in this website. It was not easy, but it was accomplished. The containers had to be setup properly in the css, so the embedded code will do what I intend it to do.
For example, the audio track is not the same size as the video, so it needed to be placed into a div tag with a different class than the video. This allowed me to create different css for the different classes. Which allowed me to create a different look for each. The presentation needs to be clickable, in order for the user to click from one page to the next, while the video and the motion graphics only need a play button.
It is much easier to incorporate multimedia into a website if it is under the control of third party software. I utilized YouTube, Canva, and BandCamp in order to achieve this. They are already set up to display properly on multiple browsers, apps, and devices. Using third party software often allows users more control, such as logging in to their account on YouTube in order to subscribe to your channel.
I did encounter issues when attempting to add multimedia to my site. YouTube would not allow me to share a video, due to a copyright issue. They would allow me to keep my video on YouTube, but woud not allow me to use an embedded code. As a designer, it is extremely important tht we check for issues like these when building websites. What could be a working link today, could be blocked by that same third-party app in the future. In turn leaving the website with a broken link, and an error message.
I was lucky that I didn't have to struggle with design limitations. This website has been very drab up until now, and adding multimedia to the website gave it new life. The coding went off without a hitch, as I didn't seem to get stuck in one place for very long.
The only alterations that needed to be made to accomodate the multimedia, was deciding whether to put it at the top of the page or the bottom. So, I did have to copy/paste a few times to see the differences, and determine what makes the most sense from the user's perspective.
Below is an example of an embedded BandCamp Audio file, and a video. A Motion Grahics file has been embedded on the references page, and a presentation has been added to the development page.