![]() ![]() The video in the blue box has a fixed width and height, which causes it to spill over into the adjoining content area when the width of the blue box is less than the video width.ĭesktop users can narrow the browser window and the video will eventually stick past the page and not be fully visible.Īnother drawback of specifying the dimensions of a video is the black bars that display when the dimensions do not match the source aspect ratio. The section below is split into two columns, as seen by the blue and black boxes. Specifying a fixed width and height for a video can cause layout issues. What we are left with are the same concerns for responsive images: aspect ratio, quality, and file size. However, we can simplify things by ignoring file types, video and audio codecs, the video player, and the video source for this discussion. We probably don’t hear about responsive video often because video is complicated. We want to avoid static sizing that can break page layouts, distort the image, or display black bars around the video. ![]() In order for a video to be responsive, the video should always expand to fill the width of its container while maintaining its original aspect ratio. What is responsive video and why don’t we hear more about it? Yet, people rarely mention video when they talk about responsive design. Video is more prevalent on the web than ever before. To achieve a responsive width and height, we’ve added a div around the iframe with the class video-responsive, which we style below. By default, browsers render iframe, canvas, embed and object tags as 300px x 150px if not declared. ![]() You might think that forcing the width to be 100% with the height set to auto might work, but this will result in a video with a responsive width and a height of 150px. This way, it will look good on all screens. We want it to fit the width of the container it is in. On smaller screens, it will be too large and on larger screens, it will look small. Declaring static sizes isn’t a good idea in responsive environments. Īs you can see from the code above, the embed code sets a static width and height on the iframe. Check our classes guide for an explanation of what the classes do. We’ve placed the embed code inside a container that we’ve sized and positioned using some pre-defined classes. Under the video, click on SHARE.įrom the box that appears, copy the HTML code and paste it where you want the video to appear in your Startup template.īelow, you can see the HTML we added to our template. To embed a YouTube video on your Startup website, first, navigate to the video with your browser. There are several articles online that do a comparison of the three if you are interested. We’ll only show how to use these platforms, we won’t go into detail on what each platform offers or which one we recommend. ![]() We’ll show how to embed videos hosted on three popular platforms: YouTube, Vimeo and Wistia. In this article, we’ll show you how to embed videos on your Startup template. It has been shown that using video on a landing page can increase conversion by up to 86%. Including videos on your website is a great way to add engaging content. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |