Embed responsive video using Video Embed Field on Drupal 7 (copy and paste the code)

For embeding responsive video, I've used the versatile module Video Embed File to add a video field in my Drupal templates and make the life simple to my final clients.

But I always have the same issue: how can I render (display on the screen) the videos responsively, so my client only needs to populate the Youtube/Vimeo URL in the viedo field? I came across this CSS trick, which combined with some additional PHP in your Drupal template file will do the job in a simple and clean way.

Instructions step by step:

1) Install the module Video Embed File for Drupal.

2) Now you have a new field to add to your templates Configure it on the top menu Structure > Content types > Portfolio (in my case, here the content where you want to add the Embed Video Field) > Manage Fields tab.

Drag it when you want it to appear in your page/article/node form when adding new content to your website.

3) Configure also the Manage Display tab > Field type = Video Player:

4) Find the machine name of the Video Embed Field (field_video in my case, see picture above)

5) PHP. Add this code to your node.tpl.php file (in my case, is node--portfolio.tpl.php), in the place where you want to be rendered/displayed on screen:

<?php if (!empty($content['field_video'])) : ?>     <div class="video-container">     <?php print render($content['field_video']); ?>     </div>   <?php endif; ?>

 

6) Notice that I have added the machine name (from step 4)in 'field video'

7) Add the CSS class"video-container"

I'm going to define this CSS class in the next step:

 

8) CSS trick. Copy this code into your CSS file (style.css or similar):

.video-container {  position: relative;  padding-bottom: 56.25%;  padding-top: 30px;  height: 0;  overflow: hidden; }

.video-container iframe, .video-container object, .video-container embed {  position: absolute;  top: 0;  left: 0;  width: 100%;  height: 100%; }

9) That's all. Now your videos in Viedo Embed Field will be responsive.

 

To know more about how this trick works, please go to webdesignerwall.com, who, at the same time, found this elastic CSS method on cssmojo.com.

Edaimon De Juan

Need help for your Communications Department?

For a web or design project?

I'm available for new positions and projects..

I look forward to hearing from you.

 

CONTACT

Get in touch

  • Edaimon De Juan
    Brighton
    BN2
    East Sussex
    UK
  • +44 (0) 7427 666 942
  • hi@edaimon.uk
Signup to my newsletter: