Using embedded assets plugin to display youtube or vimeo embed urls on a template

Question

I'm trying to use the "Embedded Assets" Craft plug-in to embed Youtube and Vimeo videos in a matrix field, but I can't figure it out. I've read through the instructions on the Github page but I can't make sense of it.

I have successfully installed the plug-in, and it seems to be "grabbing" the videos correctly since I can see the video in the assets section and the json files are in the folder on my disk.

I put this twig code from the instructions of the plugin provider in my template:

{% for asset in assets %}
    {% set embed = craft.embeddedAssets.fromAsset(asset) %}
    {% if embed %}
        {{ embed.safeHtml|raw }}
    {% endif %}
{% endfor %}

but it breaks my page.

This is the error message I get, saying the variable "assets" does not exist:

52         <div class="video">
53                 {% for videoEmbed in videoEmbed %}
54                     {% set embed = craft.embeddedAssets.entry.    (videoEmbed) %}
55                     {% if embed %}
56                     {{ embed.safeHtml|raw }}
57                     {% endif %}
58                 {% endfor %}
59                 {% endif %}
60 
61         </div>
62 
63             
64         {% endfor %}

I work locally and have dev mode turned on.

I am trying to use the plugin inside a matrix field with "videoEmbed" as block and field handle.

I created an asset source/ folder called "videos".

And I am on the personal licence.

Answer 1

You need to define your assets, if the asset field is named videoEmbed in your matrix matrixFieldHandle you would loop through the matrix and grab the first asset with:

{% for block in entry.matrixFieldHandle %}

  {% set asset = block.videoEmbed.first() %}

  {% set embed = craft.embeddedAssets.fromAsset(asset) %}

  {% if embed %}
    {{ embed.safeHtml|raw }}
  {% endif %}

{% endfor %}

You can find additional information about matrix-fields and templating here: https://craftcms.com/docs/matrix-fields#templating

Answer 2

Just to wrap it up:

I have a martix field for blog entries with the handle blogBody with a rich text block and several image blocks for different styled images.

Here is the solution:

I added a block to the matrix field with the handle blogBody, that has the handle embedVideo. The corresponding field is also called embedVideo.

In the template I added to the block with the handle blogBody this code:

    {% if block.type == "embedVideo" %}
        {% set asset = block.embedVideo.first() %}
        {% set embed = craft.embeddedAssets.fromAsset(asset) %}
            {% if embed %}
            <div id="video-box" class="videobox">
                  {{ embed.safeHtml|raw }}
            </div>
            {% endif %}
    {% endif %}

Works.

I also needed some responsiveness for the embedded video and used good "FitVids". So I wrapped the thing for the output in a div with a corresponding ID to FitVids and added a little bit of styling to the video wrapper using the class.

Nice.