How to embed multiple YouTube videos?

[philipschilling]

What question would you like to ask?

I created an asset field to add videos to an entry:

I want to include in the template not just one video but all videos which have been added to the field in the entry. When I use the following code, I get an error:

    {% set videos = craft.embeddedAssets.get(entry.videos.all()) %}
    <div class="videos">
        {% for video in videos %}
        <div class="video">
            <iframe src="https://www.youtube.com/embed/{{ video.getVideoId() }}" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
        </div>
        {% endfor %}

Twig error message: TypeError spicyweb\embeddedassets\Variable::get(): Argument #1 ($asset) must be of type craft\elements\Asset, array given, called in /v1/vendor/twig/twig/src/Extension/CoreExtension.php on line 1635

When I use one() instead of all(), I don't get an error but it will only include one video. Do you have a suggestion?

I also noticed the option in the plugin configuration to use YouTube Nocookie. With the above template setup it is not working. How does this configuration work? I also tried the variable {{ video.getUrl() }} to get the full YouTube URL but it didn't work.

[philipschilling]

When I use the following code, I noticed that the YouTube Nocookie-URL is used but the video cannot be played and produces an error:

{{ videos.getIframeCode() }}

[ttempleton]

video.getUrl() returns exactly the url value stored in the JSON file. To apply the nocookie domain, you'll need to use video.getIframeSrc([]).

I'm unsure why getIframeCode() is not working for you. Could you please post the video URL and I'll try it on my machine.

craft.embeddedAssets.get() doesn't support operating on an array of assets, although that's a good idea and something I'll look at when I get a chance. For now, you could do something like:

<div class="videos">
    {% for video in entry.videos.all() %}
        <div class="video">
            {% set video = craft.embeddedAssets.get(video) %}
            {# the rest of your code here #}
        </div>
    {% endfor %}
</div>

[philipschilling]

Many thanks for your feedback. I think the main issue was that I was looping through the embedded assets instead of the entries containing the asset. With your reversed code it worked. I ended up with this solution:

        {% if entry.videos|length %}
        <h3>Videos</h3>
        <div class="videos">
            {% for video in entry.videos.all() %}
            <div class="video">
                {% set video = craft.embeddedAssets.get(video) %}
                {{ video.getIframeCode(
                    ['autoplay=0', 'controls=0', 'playsinline=1'],
                    ['loading=lazy'],
                    ['frameborder=0']
                ) }}
            </div>
            {% endfor %}
        </div>
        {% endif %}