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>
Related
Below is the code I used for the video link:
<div id="greyBox_815022" align="center">
<iframe src="https://www.youtube.com/watch?v=RhrrJ6YKR2U" title="YouTube video player" frameborder="0" allow="accelerometer; sclipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="imgRight_w"></iframe>
</div>
Any and all help is greatly appreciated. I am very new to this and thrown into this role at work. I'm not entirely sure what I am doing... ;)
When I load the video from youtube, I get this result:
When I load the video from Cloudinary, I get this result:
PROBLEM: Even though, it's the exact same video, when I load it from Cloudinary, it doesn't fill all of the iframe window.
This is the code responsible for both implementation:
<iframe
className="embed-responsive-item"
src={
generic_profile.videoURL == undefined
? "https://www.youtube.com/embed/wYxDJOFgDw0"
: cloudinayURL
}
frameborder="0"
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen
></iframe>
NOTE: I am using ReactJs.
QUESTION: Is there any way to solve this?
I just used the video tag and it solved the problem:
<video controls="true" class="embed-responsive-item">
<source
src={
generic_profile.videoURL == undefined
? "https://www.youtube.com/embed/wYxDJOFgDw0"
: generic_profile.videoURL
}
type="video/mp4"
/> <!---now it will work well--->
</video>
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'
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>
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