Video Set-Up Examples
To make a full-width video like this, copy the embed code from YouTube.
- In YouTube, click the "Share" button, then the "Embed" button to get the code.
- Paste the embed code in an HTML module from the toolbox
- After you paste the code, go to the Advanced tab in the widget, and add "responsive-video" in the class
Click on the wrench in the widget below to see settings.
If you don't need the video to be the full width, you could also use the video module in the toolbox.
- I used the row with the left and right sidebars and put the video in the middle so it's centered on the page.
- Get the YouTube embed code
- Use the video module from the toolbox
- For video type, use "Embed"
- Paste the embed code into the module
You don't need to enter the class in the advanced tab to do it this way, but it won't fill the full width of the page after you save. Click the wrench in the module below to view the settings.
You can also put a video in the background of a row and overlay text or other content onto it.
- Click on the wrench for the row settings
- Scroll down to the background settings
- Select "Video"
- For Source choose "YouTube or Vimeo"
- Paste the Share link from YouTube (you don't need the embed code this time)
- Enable audio if you'd like
- Enable video on mobile
- You could add a screenshot of the video as a fallback image if you'd like
- If you're adding content on top of the video, you can also overlay a tint of color to make it easier to read
- Now, go back up towards the top of the settings and set row height to "Minimum Height"
- Then you may need to play with the height a bit to get it so it doesn't cut it off. In the example below I used 650px.
Click on the wrench in the row settings to see example. You probably won't use this option often but I thought I'd add it in case you want to put a video in the slider area of your home page someday.
Overlay Text
