Git Product home page Git Product logo

craft-videoembedder's Introduction

Video Embedder plugin for Craft CMS 3.x

Screenshot

Craft plugin to generate an embed URL from a YouTube or Vimeo URL. This plugin will be 100% free.

Ported over from Viget's Video Embed plugin for Craft 2.x.

Requirements

This plugin requires Craft CMS 3.0.0 or later.

Installation

To install Video Embedder, follow these steps:

  1. Install with Composer via composer require mikestecker/craft-videoembedder from your project directory
  2. Install plugin in the Craft Control Panel under Settings > Plugins

Video Embedder works on Craft 3.x.

Video Embedder Overview

Video Embedder will take your YouTube or Vimeo URL's and convert the URL into an embed-friendly URL for use inside an iframe tag. Video Embedder also has a variable which will take the same URL and get the thumbnail image URL.

Using Video Embedder

Pass a YouTube or Vimeo URL to the getEmbedUrl variable and an embed URL will be returned. The plugin will check if the URL is valid and allows embedding. If it doesn't, it will return an empty string.

{% set embed = craft.videoEmbedder.getEmbedUrl('https://www.youtube.com/watch?v=6xWpo5Dn254') %}

{% if embed | length %}
    {{ embed }}
{% endif %}

Example:

{% set embed = craft.videoEmbedder.getEmbedUrl('https://www.youtube.com/watch?v=6xWpo5Dn254') %}

{% if embed | length %}
    <iframe src="{{ embed }}"></iframe>
{% endif %}

Output:

<iframe src="//www.youtube.com/embed/6xWpo5Dn254"></iframe>

New in 1.0.5:

getEmbedUrl will now accept optional parameters to YouTube and Vimeo URL's such as autoplay, rel, etc:

{% set embed = craft.videoEmbedder.getEmbedUrl('https://www.youtube.com/watch?v=6xWpo5Dn254', {autoplay: 1, rel: 0, theme: 'dark'}) %}

Video Embedder will also pull the largest thumbnail URL from YouTube or Vimeo using the getVideoThumbnail variable.

{% set thumbnail = craft.videoEmbedder.getVideoThumbnail('https://www.youtube.com/watch?v=6xWpo5Dn254') %}

{% if thumbnail | length %}
    {{ thumbnail }}
{% endif %}

Output:

//img.youtube.com/vi/6xWpo5Dn254/0.jpg

New in 1.0.5:

Video Embedder will now generate the iframe code. Simple use the embed variable with your URL. You can also pass in optional parameters to YouTube and Vimeo URL's such as autoplay, rel, etc.

Basic example:

{% set embed = craft.videoEmbedder.embed('https://www.youtube.com/watch?v=6xWpo5Dn254') %}

{% if embed | length %}
    {{ embed }}
{% endif %}

With parameters:

{% set embed = craft.videoEmbedder.embed('https://www.youtube.com/watch?v=6xWpo5Dn254', {autoplay: 1, rel: 0, theme: 'dark'}) %}

These parameters will simply output at the end of the embed URL string and have only been tested with YouTube and Vimeo. Check with each provider for which parameters are supported.


New in 1.0.9:

Return only the Vimeo or YouTube ID from the URL. This is helpful in use cases such as using it with Plyr

Basic example:

{% set videoUrl = 'https://www.youtube.com/watch?v=6xWpo5Dn254' %}
{% set videoId = craft.videoEmbedder.getVideoId(videoUrl) %}
{% set providerName = craft.videoEmbedder.getProviderName(videoUrl) %}

{% if videoId | length %}
    <div id="player" data-plyr-provider="{{ providerName | lower }}" data-plyr-embed-id="{{ videoId }}"></div>
{% endif %}

Video Embedder Roadmap

Some things to do, and ideas for potential features:

  • Add in the ability to actually generate the iframe HTML
  • Add new Video URL fieldype (thanks @samuelbirch!)
  • Limit Video URL fieldtype to only allow for supported video URL's
  • Add support for more video providers (partially added with 1.0.5 by switching to using the Embed library)
  • Add more thumbnail size options
  • Testing

This is my first plugin and I'm not very experienced with plugin development. Feel free to fork away, add whatever you'd like to see and send me a pull request.

Brought to you by Mike Stecker

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.