Youtube embed

[bekmuradov]

Describe the bug

Hi. Trying to embed videos from YouTube, but getting this error in the console.

• HTTP “Content-Type” of “text/html” is not supported. Load of media resource https://www.youtube-nocookie.com/embed/qZXt1Aom3Cs failed.
• Cannot play media. No decoders for requested formats: text/html

When I inspect the console I see HTML video element with src attribute
<video poster="" preload="metadata" class="q-media--player" style="height: 100%;" src="https://www.youtube-nocookie.com/embed/qZXt1Aom3Cs"><p>To view this video please enable JavaScript and/or consider upgrading to a browser that supports HTML5 video.</p></video>

This is my code:

<template>
  <div class="q-pb-md" style="max-width: 514px;">
    <!-- <q-video
      id="yt-embed"
      :ratio="16/9"
      :src="`https://www.youtube-nocookie.com/embed/${$route.params.videoId}`"
    /> -->
    <q-media-player
      ref="myPlayer"
      type="video"
      background-color="black"
      :muted="muted"
      :show-big-play-button="true"
      :sources="video.sources"
      :poster="video.poster"
      :tracks="video.tracks"
      track-language="English"
    ></q-media-player>
    <q-card>
      <q-expansion-item
        expand-separator
        :label="video.title"
        :caption="video.channel.name"
        class="youtube-expansion"
      >
      <q-card-section class="q-pt-none">
        {{ video.snippet.description }}
      </q-card-section>
      </q-expansion-item>
    </q-card>
  </div>
</template>

<script>
export default {
  name: 'VideoPage',
  data () {
    return {
      muted: true
    }
  },
  computed: {
    video () {
      const videoId = this.$route.params.videoId
      const videoObj = this.$store.state.youtube.videos.find(video => video.id === videoId)
      return {
        ...videoObj,
        label: videoObj.title,
        poster: '',
        sources: [
          {
            src: `https://www.youtube-nocookie.com/embed/${videoId}`,
            type: 'video/mp4'
          }
        ]
      }
    }
  }
}
</script>

If I use <q-video/> element it plays fine.
I tried to use both of this youtube links
https://www.youtube-nocookie.com/embed/qZXt1Aom3Cs
https://www.youtube.com/embed/qZXt1Aom3Cs

This is my package json file:

{
  "name": "yt",
  "version": "0.0.1",
  "description": "",
  "productName": "Quasar App",
  "author": "Beck",
  "private": true,
  "scripts": {
    "lint": "eslint --ext .js,.vue ./",
    "test": "echo \"No test specified\" && exit 0"
  },
  "dependencies": {
    "@quasar/extras": "^1.0.0",
    "axios": "^0.21.1",
    "core-js": "^3.6.5",
    "jquery": "^3.6.0",
    "quasar": "^1.0.0"
  },
  "devDependencies": {
    "@quasar/app": "^2.0.0",
    "@quasar/quasar-app-extension-qmediaplayer": "^1.2.1",
    "babel-eslint": "^10.0.1",
    "dotenv": "^10.0.0",
    "eslint": "^7.21.0",
    "eslint-config-standard": "^16.0.2",
    "eslint-plugin-import": "^2.14.0",
    "eslint-plugin-node": "^11.0.0",
    "eslint-plugin-promise": "^4.0.1",
    "eslint-plugin-vue": "^7.7.0",
    "eslint-webpack-plugin": "^2.4.0"
  },
  "browserslist": [
    "ie >= 11",
    "last 10 Chrome versions",
    "last 10 Firefox versions",
    "last 4 Edge versions",
    "last 7 Safari versions",
    "last 8 Android versions",
    "last 8 ChromeAndroid versions",
    "last 8 FirefoxAndroid versions",
    "last 10 iOS versions",
    "last 5 Opera versions"
  ],
  "engines": {
    "node": ">= 10.18.1",
    "npm": ">= 6.13.4",
    "yarn": ">= 1.21.1"
  }
}

Desktop

• Browser Firefox
• 81.0 (64-bit) Mozilla Firefox for Manjaro

[hawkeye64]

QVideo uses an iframe. What happens if you use just

However, this says you must explicitly use an iframe. In which case, maybe QMediaPlayer will work if you do that.