Responsive Videos

From Car and Driving
Jump to: navigation, search

Responsive videos are supported.

To make a helper page responsive, set the video_width parameter to 'responsive' - e.g.

http://www.caranddriving.com/ws/a041/helper/helper.aspx?user_id=demo&r=10484&video_width=responsive&what=video

To make a video url, as returned by the webservice, responsive, add the querystring &responsive=true to the end of the video url - e.g.

http://www.caranddriving.com/cdwebsite/player.aspx?id=8770&cid=demo&responsive=true

Note that if you also set the width parameter in addition to the responsive flag, the width parameter will be ignored.

To make a responsive video display correctly in an iframe, we recommend that you embed code such as the following in your page:

<div class="video_responsive">
<iframe src="http://www.caranddriving.com/ws/a041/helper/helper.aspx?user_id=demo&topreview=y&what=video&video_width=responsive" frameborder="0" allowfullscreen></iframe>
</div>

and CSS like this:

.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%;
}

Note the 56.25% is a precise figure, needed to ensure a 16x9 aspect ratio on the video is achieved. This will size the window precisely to fit a 16x9 video; if you are pulling in other content (e.g. what='video;title' this height calculation will be wrong. In this case you will need to set the height of the iframe explicitly, because it could be any length depending on the length of content you are pulling in. If you are using the helper page, just set 'video_width=responsive' when you call it, and the video width will autofill to the appropriate width for the the slot in the page you give it, and the text will layout correctly too.

The responsive video player is slightly different from the standard video player in two respects:

1) There is no border around the video itself

2) Video chapters are not displayed as buttons beneath the video; rather they are shown as chapter markers - white dots on the video progress bar itself - and as a menu that appears when the mouse hovers over the window. Some mobile devices, such as iOS may not display the chapter markers but the progress bar can still be used to skip forward and back in the video.

Important: When using video information returned by the webservice, please use the video_urlforiframe element and paint that in an iframe, and *not* the contents of the hdvideo element. Direct access to the mp4 files is provided for those that want to implement Google SEO on the video content only, and is not intended for direct use. If you are using the helper page, this is done for you automatically.

Personal tools