Curt Trout, Mon, Nov 25, 2013
One of the frequent questions we get from prospective clients is: "Can I have video embedded on my site?" The answer is: "Yes!"
There are actually two techniques that we can use to embed video in a website. The first, and by far the easiest to implement, is to embed video from an external video host, e.g., YouTube or Vimeo, using the Drupal Video Filter module. The second involves hosting the video on the same server as the website. The first technique is appropriate for most needs. We'll be happy to discuss when self hosting is appropriate or how to decide upon a technique with any client or prospective client.
OK, Curt. If it's so easy why don't you show it? OK, I will; here goes!
Some Questions and Comments:
-
Why did I pick this video?
- I like both the tune and its title; it's Beethoven's Ode to Joy.
- I found the video by following a link on a friends Facebook page (thanks, Julie). That link was titled Best coin ever spent. (Shameless self promotion) That implies great value and we think that Troutreach created websites represent great value for our clients.
-
Is it responsive? Is it really that simple?
- Yes, it's responsive and yes, it's really simple as we have implemented it.
- Note: It is not necessary to specify any alignment for the video. The video will be full width so centering, left or right alignment will have no practical effect.
-
Notes for other Drupal developers: Inherently, the Drupal Video Filter is not responsive. We, as Drupal developers can however make it responsive while keeping it easy to use with just a little effort.
- You may want to look at http://avexdesigns.com/responsive-youtube-embed/ for details of the technique I employed here. There are other sites that also describe this process; this is the first one I found.
- The technique used here requires that the code inserted by the Video Filter module be wrapped in a named section (div or p) that can be used for CSS selection. At the time of this writing there is a feature request pending to provide that wrapper with a supplied patch. I have manually applied the patch referenced in https://drupal.org/comment/7335982#comment-7335982 to the 7.x-3.1 version of the module.
- Depending upon specific page contents, you may need to add some extra vertical spacing before the content immediately below the video window. Probably the easiest way to do this is to add a line break at the beginning of the next item, be it a paragraph, div or heading. On this page we've got one added to the h3 tag above.