Important Premises
When adding multimedia to the HTML markup there are some limitations that may require higher skill level for developer to ensure that their content will be displayed properly. Although multimedia ought not to ever be forced on the viewer, developers should always ensure full compatibility with the latest browsing technology standards. Embedding multimedia in the HTML markup structure today presents some challenges from a purely web designer standpoint. One of the challenges the implementation of multimedia poses lies in the responsiveness aspect, especially when it comes to ensuring the original specifications such as aspect ratio are kept as intended.
HTML5 Multimedia Tags
When working with elements such as iframes, in fact, relying on methodologies such as the padding rule is perhaps the most leveraged manner to tweak size and ratio of the frame so that its original specifications are delivered to the viewer as intended. While iframes are meant to embed content that resides on other web pages, other elements such as the <embed> and <object> tags are meant to be used with content such as PDFs, SVG, and even Adobe Flash although the latter is progressively receding thanks to the latest HTML5 standard which, among the others, it features built-in multimedia support.
HTML5. Raising The Bar
Using many of the HTML5 new features often translates for web developers a better implementation of multimedia without resorting to external plugins. For instance, using the new HTML5 tags <video> and <audio> provides a better ability to devs to using one single repertoire of resources that are all located withing the HTML markup. As a matter of facts they allow to include video and audio with added capabilities such as subtitles and captions to be displayed on a variety of browsers with backward compatibility. From a user standpoint, however, there are limitations that are inherent to the use of the new HTML5 standard. One of them, and perhaps a relevant one it affects the accessibility aspect.
Thinking Accessibility
Because of the built-in multimedia features, for instance, a user with visual ailments won’t be able to leverage among the others things like tabbing through controls, a critical feature that was proprietary of external plugin players such as Adobe Flash. By no means, however, this represents a hurdle without possible fixes. A remedy to this vital accessibility issue can be found in the implementation of some javascript which will allow a user with visual impairments to tab through and use multimedia content thus embracing a wider audience. From a web development standpoint implementing javascript into the HTML markup often implies either extra steps, a broader knowledge or the involvement of third parties for a comprehensive resolution. As a matter of fact most aspects of web development require a broader knowledge in order to provide users with an experience that is less limiting and more satisfying.
Caveats
While a front-end developer is an essential figure for the design and development of a great user experience, having a more comprehensive knowledge often found in a full-stack developer translates in a more linear, cohesive design experience with less steps and a tighter connection of all these building blocks. Regardless of the above, however, there are some limitations that are proprietary to the technology used where designers and developers alike should thoroughly think through of the real benefits for the user to embed multimedia. The most important, perhaps, is the use of bandwidth, load speed, and traffic generated by a multimedia element especially when it comes to videos.
Multimedia and Mobile First
Typically, around 40% of users will leave a mobile website if it does not load within 3 seconds (Lerat, 2015). This means that in order for a mobile website to be efficient its multimedia elements also need to be designed efficiently. It also means heavier taxing of network infrastructures in order to keep up with the demand of that resource. Consuming multimedia content through mobile devices is exponentially rising each year and more and more users are consuming content on their smartphones and tablets. There is an important limitation in this regard, though. That is web browser compatibility. Although an increasing number of users own recent devices supporting HTML5 standard not all devices browsers are still capable to do so.
Challenges
Going back to the challenges encountered when attempting to embed multimedia content into the website: there were two main hurdles that had to be overcome. The first relates to the size and aspect ratio of the content that had to be imported through the iframe html element. Using the padding rule took several trials and errors before decent results could be attained. This felt as a very empiric technique and not based on a proven scientific method. Due to the fact that not all videos are formatted in the same manner, this resulted in an adaptation type of technique where padding is the main coefficient to leverage to attain those results. Another challenge that the iframe and its container element poses is the positioning technique used. Since most of the content on a web page is statically positioned, positioning an iframe element on a page required using the relative type of position which sometimes required a re-arrangement of some of the elements already present.