How to Manage Video Styles using Video Embed Field Module in Drupal 7

In part one of this series on the Video Embed Field module, we used the module to embed videos into articles and created a block using Views that displayed recent articles with video thumbnails.

The block we created in part one is pretty basic. It’s a simple block view that displays a title and video thumbnail. Instead of displaying a thumbnail, let’s configure the block view to display a video player. This allows users to watch videos directly from the block.

But more importantly, it gives me a chance to demonstrate Video Embed Field’s video styles.

Fig 1.1

A video style allows you to configure a video player’s width, height, player theme and more. You can have as many different styles of players as you want or need.

For example, you could create a video style that will display a video at 640px wide on an article page. Then on the homepage, have another style that will display the video at 320px.

Bottom line is, you’re not stuck with a single player.

Now, let’s create a custom video style for the block that we created in part one.

Getting Started

Before we can continue, make sure you’ve read “How to Embed Videos using Video Embed Field Module in Drupal 7”. We’ll continue building the “Recent articles” block.

How to Create a Video Style

1. In the administration menu, go to Configuration, “Configure Video Embed Styles” and click Add.

2. Enter “block” into the Name field, change the “Player Width” to 168px and “Player Height” to 150px.

Fig 1.2

Also, don’t forget to change the Vimeo settings.

3. Now go back and edit the “Recent articles” view. We created this block in part one.

4. Click on the “Content: Video” field in the Fields area and change the Formatter to “Video Player” and “Video style” to “block”.

Fig 1.3

5. Save the view and go back to the homepage.

Instead of seeing thumbnails in the block, now you should see video players.

Fig 1.4

And finally, video styles can be exported using Features, or you can manually export styles by clicking on the Export link within the Operations column.

Fig 1.5

That’s it for our second part on using Video Embed Field module. Even though this module is considered a “lightweight solution”, you can do a lot of things with it from displaying thumbnails and configuring custom video players.

If you have any questions, please leave a comment.

17 thoughts on “How to Manage Video Styles using Video Embed Field Module in Drupal 7”

    1. It’s a simpler solution. If you want to use Emfield you’ll have to install: Media, “Media Internet Sources”, “File entity”, “Media: YouTube” and finally Emfield.

      That’s a total of 5 modules just to embed YouTube videos. That’s a lot of modules.

      If all you want to do is embed YouTube videos in a structured way (using a field), then I would use “Video embed field” instead of Media.

      Hope this helps.

  1. Hi Ivan!
    I am trying to arrange the videos like they are displayed in YouTube i.e. one big video and the rest – small on one side. Is that possible at all?

    Thanks!
    Petya

      1. I use this Video Embed module as well as Views, but I can’t figure out how to render them *only* in the big frame (like YouTube). For example: the 1st video normal size, the next 3 videos small previews of the clips, and on the right side of the 1st one; also I want when I click on one of the of the side, the video should be rendered in normal size.

        Do you think this could be achieved? I am sorry if this is something easy to do but I am new in Drupal…

        1. Yes it is possible, but you’ll need more than just “Video Embed”. All the module does is convert a URL into an embedded player.

          Look at creating a content type called “Video” to store the actual video and use Views to create the listing. Now, if you’re new to Drupal I recommend that you spend some time learning about content types, fields and views.

          1. Thanks a lot! I will look closer into the different Drupal components. At least now I know that what I want to do is possible.

  2. Petya,

    Since Ivan writes some of the best Display Suite tutorials on the Internets, I thought I would drop this answer here. The easiest way to create a view where the first item in a view is rendered different than all the rest (ala a featured item) is to use Display Suite.

    If you render a view as a Display Suite view, you then get drop down boxes that allow you to set a different rendered view mode for the first item in a view. So you make 2 view modes, 1 for large video with a clickable link and one for just thumbnail images of videos.

    Another way to do this is to use a content detail screen (full view mode) to display the large video and then make a block view of JUST thumbnails. Then you place the view on the detail page with context or Block UI.

  3. Hi Ivan,

    I have a view that displays slideshow of embeded videos. The only problem I have now is the video screen is not responsive. Would you mind if you can show me some options to make it responsive, please?

    I really appreciate your help!

  4. Hi Ivan,
    how do I put the video url to meta og:video? I try to put this token [node:field_embed_video] to meta tags -> Open Graph in field named “Video URL”, but does noting. If I put the url (to youtube) as is (not token) in this field, so I see in source code: meta property=”og:video” content=”www.youtube.com/embed/….” />

  5. Guillaume Slama

    Hi Ivan,
    This is great and has really helped. The only issue I have is with the auto-play. It doesn’t seem to work. I went to Configuration>Video Embed Field>Styles and edited the settings for all platforms, yet it doesn’t work.
    Am I missing something?
    Thank you,

Leave a Comment

You have to agree to the comment policy.

This site uses Akismet to reduce spam. Learn how your comment data is processed.