Youtube shortcode from data file?

support
1

i have data files with youtube video ids in it

for example:
(from 1.yaml)
title: ABC
what: solo
venue: 1 Pennsylvania Ave.
when: 2018-11-12
who: Frank Zappa
youtube: w7Ft2ymGmfc

how do i insert this in a range?

{{< youtube .youtube >}}

isnt working

2

ok, i understand this cannot be done in templates.

but how do i pass the link to embed it manually?

<iframe width="560" height="315" src="{{ .youtube }}"></iframe>

isn’t working

3

Hi,

Have a read here for how to access data files: https://gohugo.io/templates/data-templates/

4

@blablabla, please read Requesting Help and share your code. Please don’t create new threads until you’ve done so, because we can’t help otherwise, okay?

For instance, we need to see how you are rendering the data in your template to inform you of how to accomplish your goal. So share that project. :slight_smile:

5

i’m unable to share everything presently, as the code is for someone else, but soon we will be able to open-source it. for now, here is my dilemma, expressed as best as i can:

my data files look like this:

title: Mukundamala
venue: La Kaje, New York City
vernissage: 2018-11-18
finissage: 2018-11-18
what: perf
youtube: https://www.youtube.com/watch?v=FhAXkVFIgN4

and in the layout folder, part of my template for “performances” under “single.html” looks like:

      {{ if .youtube }}
      <section>
        <iframe width="100%" height="315" src="{{.youtube}}"></iframe>
      </section>
      {{ end }}

this shows up in the page source, when i hit “view source”. however, i see an outline of the iframe but no actual content

you can see it here: brud.xyz/performances

i’ve checked the youtube embedding options, and it is turned on, so the problem seems on my end

6

this works for me within a shortcode

<iframe  width=854 height=480 src="https://www.youtube.com/embed/{{ index .Params 0 }}?html5=1" allowfullscreen></iframe>

The only param ist the youtube id: FhAXkVFIgN4

7

this isn’t working for me either, is it maybe because i’m accessing it from a data file? don’t see why that should affect anything really

8 
/* in your videos.yaml data file */

video:
  - title: Mukundamala
    venue: La Kaje, New York City
    vernissage: 2018-11-18
    finissage: 2018-11-18
    what: perf
    youtube: FhAXkVFIgN4


/* in your single.html */

{{ range .Site.Data.videos.video }}

 {{ .title }} 
<iframe  width=854 height=480 src="https://www.youtube.com/embed/{{ .youtube }}?html5=1" allowfullscreen></iframe>

{{ end }}
9

I don’t know youtube’s API, but I think for iframe you have to use the “embed” syntax.
You can use the replace funcion to change the url or remove “https://www.youtube.com/watch?v=” to get the id

https://support.google.com/youtube/answer/171780

10

i tried this, and the result is not different from my data file setup. is this a cross-origin problem? is it because i’m hosting on netlify? i dunno cos i don;t see it rendering locally neither.

11

i’m using youtube’s own suggested way to do this:

<iframe width="560" height="315" src="https://www.youtube.com/embed/FhAXkVFIgN4" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

which i use as:

<iframe width="560" height="315" src="https://www.youtube.com/embed/{{.youtube}}" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

still, no dice

12

how looks the generated code? Try it first in a static site!

13

suddenly, things seem to be working (?!)

https://brud.xyz/performances/

i believe this was the result of my last comment. will test some more, then report back with a solution. thank you all.

14

ok. things seem to work.

i had to restart hugo from the terminal, and force refresh the browser. might be a caching issue.

is there a way to clear cache everytime automagically?

but yes, looks like i solved it. thank you all

15

Run the server with this flag:
hugo server --disableFastRender

16

use --ignoreCache