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.
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.
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”.
5. Save the view and go back to the homepage.
Instead of seeing thumbnails in the block, now you should see video players.
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.
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.
Is there a reason you chose this module over https://drupal.org/project/emfield and/or Media Youtube?
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.
I see. So, if you’re already using Media to manage media, then you’d recommend emfield?
Yes, if you’re already using Media, then use Emfield.
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
Do you mean is it possible with Drupal or with just this module?
Either way, yes it is possible but you’ll probably have to use the [Views](https://drupal.org/project/views) module to create a listing of videos.
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…
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.
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.
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.
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!
You should be able to achieve this with CSS. If the video is embedded via an iFrame, then the link below will help.
https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
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/….” />
Hi Alexey,
Not sure about this. What URL are you after? The URL to the YouTube page? (https://www.youtube.com/watch?v=1234456)
With Tokens, often you can drill down in the field and select a different value, i.e., uri, url or fid. However, the module usually has to build that integration.
Cheer,
Ivan
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,
Hi Guillaume,
Do not know why it’s not working. I haven’t used the module in years.
Look in the module issue queue to see if others have had the same problem. (https://www.drupal.org/project/issues/video_embed_field)
Cheers,
Ivan