I'm trying to create a tag for a Youtube embed video where the src comes from a variable value of a database
The tag goes like this:
<iframe class="img-fluid w-100" width="560" height="315" src="https://www.youtube.com/embed/videoseries?list=PLx0sYbCqOb8TBPRdmBHs5Iftvv9TPboYG" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
and I'm trying to substitute it like this:
<iframe class="img-fluid w-100" width="560" height="315" src="{{frontPageConfig.recentVideos2.linkURL}}"
frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
But it does not work with or without {{variable}}.
Thanks.
You will probably need to sanitize the URL as is done in
Correct way Provide DomSanitizer to Component with Angular 2 RC6
Though you can find somre problems with the versions:
#angular/platform-browser/platform-browser"' has no exported member 'HammerLoader'
Related
how come my iframe isn't showing up at:
http://orcaaccounting.com/helloFriend.html
Here is my code,
<p style="text-align:centre;">
<iframe width="560" height="315" src="https://www.youtube.com/watch?v=riFyKUyGb4k" frameborder="0" allowfullscreen></iframe> </p>
Thanks, I am sure I am missing something small but this is my bottleneck.
Looks like you are missing the allow attribute which contains encrypted-media and the embed portion of the url. This one should work. You should copy the Embed link from the YouTube video itself, that is the appropriate way to get the iframe.
<iframe width="560" height="315" src="https://www.youtube.com/embed/riFyKUyGb4k" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
The src is wrong add embed instead of watch.
<iframe width="560" height="315" src="https://www.youtube.com/embed/riFyKUyGb4k" frameborder="0" allowfullscreen></iframe>
If I have an string url like https://goo.gl/maps/h3maMVM6JHJ2
How can I get the url https://www.google.com/maps/place/Wal+Mart/#1.0124826,102.7074445,17z/data=!3m1!4b1!4m5!3m4!1s0x31d6da283960bf79:0xff2a6dc939314ae0!8m2!3d1.0124826!4d102.7096332
using javascript
click on the link: https://goo.gl/maps/h3maMVM6JHJ2
resolves to:
https://www.google.com/maps/place/Wal+Mart/#1.0124826,102.7074445,17z/data=!3m1!4b1!4m5!3m4!1s0x31d6da283960bf79:0xff2a6dc939314ae0!8m2!3d1.0124826!4d102.7096332
click on the share icon:
click on "Embed Map":
click on "COPY HTML"
You will get an <iframe> with the src= attribute you need:
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.1953868324035!2d102.70744451475375!3d1.0124825992614412!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31d6da283960bf79%3A0xff2a6dc939314ae0!2sWal+Mart!5e0!3m2!1sen!2sus!4v1545288648700" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3989.1953868324035!2d102.70744451475375!3d1.0124825992614412!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x31d6da283960bf79%3A0xff2a6dc939314ae0!2sWal+Mart!5e0!3m2!1sen!2sus!4v1545288648700" width="600" height="450" frameborder="0" style="border:0" allowfullscreen></iframe>
My code:
<iframe height="420" width="315" src="https://www.youtube.com/watch?v=ddR9g-
YzE8g" frameborder="0" allowfullscreen></iframe>
Problem is, video is not being displayed as shown in the codepen
The codepen: https://codepen.io/don0ts/pen/gjYJvq
He you should use "/embed" along with the youtube link. A correct way of doing this should be :
<iframe width="420" height="315"
src="https://www.youtube.com/embed/tgbNymZ7vqY?autoplay=1">
</iframe>
Check the dev tools (usually with F12)
It shows this:
Refused to display 'https://www.youtube.com/watch?v=ddR9g-YzE8g' in a frame because it set 'X-Frame-Options' to 'sameorigin'.
See: link
<iframe width="560" height="315" src="https://www.youtube.com/embed/ddR9g-YzE8g" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
You should actually write this:
<iframe frameborder="0" height="190" src="https://www.youtube.com/embed/ddR9gYzE8g" width="100%"></iframe>
How to disable auto play option in YouTube embedded code.
my Video embedded code is like below and i have checked the ?autoplay=0 method. but it not working.
this is the YouTube code:
<iframe width="711" height="400" src="https://www.youtube.com/embed/E5ln4uR4TwQ?rel=0?ecver=1" frameborder="0" allowfullscreen></iframe>
i have checked like below:
<iframe width="1400" height="400" src="https://www.youtube.com/embed/E5ln4uR4TwQ?autoplay=0&rel=0&ecver=1" frameborder="0" allowfullscreen></iframe>
Thanks
To disable autoplay, just put &autoplay=0 after the video ID. see the below line:
<embed src="http://www.youtube.com/blahblah&autoplay=0"
try with this hope it will helps you.
<object width="425" height="350">
<param name="movie" value="https://www.youtube.com/embed/E5ln4uR4TwQ?autoplay=0"></param>
<embed src="https://www.youtube.com/embed/E5ln4uR4TwQ?autoplay=0" type="application/x-shockwave-flash" width="425" height="350"></embed>
</object>
I was also looking for an answer and found that adding ?rel=0 to the end of the link seems to work
Example:
<iframe width="560" height="315" src="https://www.youtube.com/embed/code for video?rel=0" frameborder="0" allow="encrypted-media" allowfullscreen></iframe>
In my html I have this:
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0&allowfullscreeen=1">
</iframe>
But when I try to make video full screen it says that I can't do this.
How do I fix this?
You can check the example here http://www.w3schools.com/html/tryit.asp?filename=tryhtml_youtubeiframe doesn't go fullscreen too
Try this, when you are using firefox.
<iframe src="your_page_url" allowfullscreen="allowfullscreen" mozallowfullscreen="mozallowfullscreen" msallowfullscreen="msallowfullscreen" oallowfullscreen="oallowfullscreen" webkitallowfullscreen="webkitallowfullscreen"> </iframe>
Try the allowfullscreen like this:
<iframe width="420" height="315"
src="http://www.youtube.com/embed/XGSy3_Czz8k?autoplay=0" webkitallowfullscreen mozallowfullscreen allowfullscreen>
</iframe>
I found this answer on a previous question which was posted here: YouTube iframe embed - full screen