post-video class in the stylesheet will make the video responsive. If you are using a responsive design theme and embedding the videos using the traditional embed code (such as iframe or object tag), you need to add a wrapped around the embed tag to make it responsive. With this method, the video embeds will be will responsive as well In other words, the Video URL in the custom panel has higher priority. If the post contains Video URL custom field, it will display the video rather than the Post Image. Some of our themes come with the Video URL input field in the post's Themify Custom Panel. With this method, the video embeds will be responsive (this means it auto resizes on all resolution) Note that not all video providers are supported, read the official embed documentation for more details. WordPress will convert the video URL into a video embed automatically using the embed feature. To embed a video in the post, simply paste the video embed URL in the content editor (note: it must be a plain text URL, not a clickable link or iframe or object embed code). Documentation / Video Embeds WordPress Video URL Embed in Content Editor 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. Then specify the child elements (iframe, object embed) 100 width, 100 height, with absolute position. The first thing that you need is the Vimeo iframe embed code, grab that in your video share options from the Vimeo site. In this article, we’ll show you how to embed videos on your Startup template. Here’s how to make a youtube video mobile: You will need to wrap the responsive youtube embed code with a div and specify a 50 to 60 padding bottom. 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. |