I have YouTube videos that I want to embed on my angular website. The links are wrapped in iframes
example
<iframe width="560" height="315" src="https://www.youtube.com/embed/tpbw5O-_mFQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
I am fetching the link from a Mysql database but when try to render the video it just displays the iframe tags, instead of the video. How do I strip the tags and display the video.
Related
I have an Reactjs nextjs app setup with an iframe src here:
<iframe
width="100%"
height="100%"
src={"https://www.youtube.com/embed/c0-hvjV2A5Y"}
title="YouTube video player"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowFullScreen
/>
however when i use multiple iframes to load multiple videos on one page I'm am getting repeated errors like this:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://play.google.com/log?format=json&hasfast=true&authuser=0. (Reason: CORS request did not succeed). Status code: (null).
Is there a solution for this?
I've been trying to emulate this: https://codepen.io/chriscoyier/pen/zawHg
This works when the video is muted, however when I try and remove the &mute=1 in the URL, the video will no longer play.
original:
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1&mute=1" frameborder="0" allowfullscreen></iframe>
adapted:
<iframe id="video" src="//www.youtube.com/embed/FKWwdQu6_ok?enablejsapi=1&html5=1" frameborder="0" allowfullscreen></iframe>
I'm not sure why this is happening.
The expected outcome I'm trying to achieve is on page load, the video starts automatically (with sound), but can be controlled with the custom play/ pause buttons thank you!
If I scroll down the video should stop.
I tried a few things from internet but didn't worked. I tried
how can I pause a youtube embed when a user scrolls away
How to play and pause a Youtube video in a webpage while scrolling(using javascript or jquery)?
Autoplay Youtube Video When Scrolled to
It would be a great help if someone can share a good resource of ANGULAR
THIS IS THE CODE FOR HTML I AM GETTING FROM DB
<div class="ast-oembed-container">
<iframe title="Genetics - 's preparation Program"
width="500" height="281" src="https://www.youtube.com/embed/J3CGg1NmA?feature=oembed"
frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media;
gyroscope; picture-in-picture" allowfullscreen>
I am trying to embed youtube video with autoplay, Loop, unmute. But Sound always mute when we use it with autoplay & loop.
<iframe src="https://www.youtube.com/embed/k6VjkfdKwFo?rel=0&modestbranding=1&autohide=1&mute=1&showinfo=0&controls=0&autoplay=1&loop=1&color=white&iv_load_policy=3&playlist=k6VjkfdKwFo" width="560" height="315" frameborder="0" allowfullscreen></iframe>
This issue is only in Chrome, it works fine in FF/IE/Edge.
I am trying to make a drag and drop builder that will allow users to add a video background to the page. Everything is OK except when setting a video background elements can no longer be dropped.
I tried placing a transparent div over the iframe, disabling pointer events, can't get it to work at all.
I created a codepen ( https://codepen.io/talextech/pen/aPGmmJ ) showing the issue in action. Try dragging the red square inside the white/dashed rectangle above. If you remove the youtube embed it works fine.
Is there any way to get the drag and drop working with the youtube video in the background in Chrome?
<div id="dragto" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<div id="dragme" draggable="true" ondragstart="drag(event)"></div>
<iframe id="videobg" width="560" height="315" src="https://www.youtube.com/embed/FQ6_Fr-Fd5k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>