View source for Adding Videos to Blogs and News Pages

You may want to simply include a video in a news article or blog; this can be done inside your website's Content Management System without the need for technical integration or code changes - you simply need to copy the correct embed code on your page.

To get the code, you will need to know your [[user_id]], and the review id of the review you want to add. Your user id is the same as that given to you by Car and Driving that gives you access to the webservice. To find the review number of the video that you need, see 'Finding Review IDs' below.

We have code samples for GForces' bespoke system, Wordpress and Drupal - please see below. If you have another system you want to work with, it is likely that the code given for Wordpress and Drupal will work fine on any system that allows entry of full HTML on a page. If you require further help with your particular system, please get in touch with support. 

Note that videos are not guaranteed to remain operational for ever; if a car is withdrawn from sale or significantly revised the old video will typically be changed or deleted.



== Finding Review IDs ==

Use the following links to get a list of the review IDs of our videos:

* http://www.caranddriving.com/cdadmin/info.aspx - Current Car Videos (type=new)

* http://www.caranddriving.com/cdadmin/infoused.aspx - Old Car Videos (type=used)


== Links for Including in Emails ==

Use a simple version of the above links like this:

* http://www.caranddriving.com/ws/a041/helper/helper.aspx?user_id=caranddriving&r=1412&what=video

(Be sure to change the caranddriving user_id to your own user_id, and to change the number 1412 to the review you want to use)


== GForces Sites ==

If your content management system (e.g. GForces NetDirector Auto V10) does not allow you to embed HTML code in a webpage, you will need to set up a link to an external website pointed at our helper page to include our videos on your webpage. Simply include an image of the car you want to link to, or of a 'play video review' icon, and link it to the 'raw' helper page address - i.e. 

https://www.caranddriving.com/ws/a041/helper/helper.aspx?user_id=demo&topreview=y&what=video&video_width=800

Or if using CAP ID, and we want the popup screen to be responsive something like:

https://www.caranddriving.com/ws/a041/helper/helper.aspx?user_id=demo&responsive=y&capid=70000

You should ensure the link is set to open a new window, rather than display in the current window. Note that the helper page has many options to allow you to set your own CSS to allow the helper page and video player to appear with the same styling as the rest of your site.

== Wordpress ==

When adding the embed code to a blog written in Wordpress, we need to overcome its automatic text formatting features which will change the embed code and break it. Go to the page entry part of wordpress; there are two editors, each on a separate tab, the visual (what you see is what you get) and and text tab (which supposedly allows the entry of HTML code onto the page). You must use the text tab. 

 <nowiki>

<style>
.video_responsive {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 20px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
  height: 0;
}

.video_responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video_responsive">
<iframe id="cdvideo" src="http://www.caranddriving.com/player.aspx?user_id=demo&id=11412&what=video&responsive=true"
   width="100%" height="2000" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="middle" allowfullscreen allow="autoplay; encrypted-media"></iframe>
</div>
 </nowiki>

.. *but* wordpress takes those ampersands, and reformats them, which breaks things. To stop that, it's easiest to use a plugin in Wordpress - I suggest "Raw HTML" which provides a set of tick box flags on each 'edit post' or 'edit page' page in wordpress; once you install the plugin, and can see the Raw HTML panel, tick 'Disable wptextureize' and 'Disable convert_chars', then save and publish. Ensure that any '&amp;amp;' in your embed code (wordpress may have already changed it) is changed back to simply '&' (without the quotes). Publish the wordpress page, and you should find the video now plays as expected.

Note the 'height=2000' on the iframe; this is specifically required for Wordpress. You shouldn't need it on other systems. Remember to change user_id=demo to reflect your user_id, and to change id=11412 to the review you want to embed.

You can see an example here: http://www.rectanglered.com/car-driving-video-wordpress-example

== Drupal ==

You can embed our videos on any Drupal based website. You don't need to use a plugin; when editing an article, simply ensure that the text format is set to 'Full HTML', and then enter code on your page (on the source tab) like this:

 <nowiki>

<style>
.video_responsive {
  position: relative;
  padding-bottom: 56.25%;
  padding-top: 20px;
  padding-left: 0px;
  padding-right: 0px;
  margin-left: 0px;
  margin-right: 0px;
  height: 0;
}

.video_responsive iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

<div class="video_responsive">
<iframe id="cdvideo" src="http://www.caranddriving.com/player.aspx?user_id=demo&id=11412&what=video&responsive=true" 
  width="100%" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" align="middle" allowfullscreen></iframe>
</div>
 </nowiki>

This code shows an Tesla Model X video, using the 'demo' user in responsive mode (it will automatically resize to fill the space available). To select a different car, use a different 'id' from http://www.caranddriving.com/cdadmin/info.aspx instead of 11412, and your user_id as given to you by our support team instead of 'demo' on the '<nowiki><iframe...></nowiki>' line. Note that if you don't change the user_id, you won't be able to get stats on how and when the video was played, and the video will play in demo mode, skipping after the first 30 seconds of every section. 

The height does not need to be explicitly set on the iframe, unlike Wordpress. 

The <nowiki><style...></nowiki> and the <nowiki><div...></nowiki> sections implement the responsive video; you can use those unchanged.

You can see an example of a video on a standard drupal page, here: http://test3.rectanglered.com/cddemo