I tried to include the youtube in an iframe but it appears blank. This is the code I'm checking with
<!DOCTYPE html>
<html>
<body>
<iframe src="http://www.youtube.com">
<p>Your browser does not support iframes.</p>
</iframe>
</body>
</html>
Why this is happening ? and what should I do to make it work ?
Check your console. It will most likely have a message like:
Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.
Read more about X-Frame-Options here:
The X-Frame-Options response header
The X-Frame-Options HTTP response header can be used to indicate whether or not a browser should be allowed to render a page in a <frame>, <iframe> or <object>. Sites can use this to avoid clickjacking attacks, by ensuring that their content is not embedded into other sites.
[...]
SAMEORIGIN
The page can only be displayed in a frame on the same origin as the page itself.
[...]
In other words [...] if you specify SAMEORIGIN, you can still use the page in a frame as long as the site including it in a frame is the same as the one serving the page.
Long story short: Youtube doesn't want you to embed their site (note: I'm talking about webpages here, not video's!) and explicitly set a HTTP header to communicate that to browsers.
If you want to display/embed a video use their code that is below every video under Share ยป Embed.
<iframe width="1280" height="720"
src="https://www.youtube.com/embed/dQw4w9WgXcQ?rel=0&showinfo=0"
frameborder="0" allowfullscreen>
</iframe>
you can try this one:
<!DOCTYPE html>
<html>
<body>
<iframe allowfullscreen="true" src="http://www.youtube.com/embed/c0MZ2bTtBm0?autoplay=1&autoplay=1" style="width: 100%; height: 100%; opacity: 1; display: block;" class="ms-slide-video"></iframe>
</body>
</html>
Related
I'm trying to add an Embed code in my Google Site
In the HTML, I'm trying to use <iframe> to display other sites in .aspx and .php.
<iframe> works totally fine with .aspx site. However, it does not display .php content.
To display .aspx, this is how my <iframe> part code looks like, which works fine.
<iframe
src="https://XXXX.aspx"
frameborder="0"
scrolling="no"
style="overflow:hidden;height:100%;width:100%"
height="100%"
width="100%">
</iframe>
However, when I added a .php site to iframe, it either shown nothing or returned 404 error.
The following was what I tried, and both of them did not work.
This returns a blank page
<iframe
src="https://www.php.net/manual/en/tutorial.firstpage.php"
frameborder="0"
scrolling="no"
style="overflow:hidden;height:100%;width:100%"
height="100%"
width="100%">
</iframe>
AND
This returns a 404 error
<iframe
src=<?php print "https://www.php.net/manual/en/tutorial.firstpage.php" ?>
frameborder="0"
scrolling="no"
style="overflow:hidden;height:100%;width:100%"
height="100%"
width="100%">
</iframe>
Please help!
This problem occurs when you enter wrong address in your Iframe tag.
please check that or tell us that address you want put in iframe.
You can test it out by putting
<!DOCTYPE html>
<html>
<body>
<iframe src="https://www.php.net/manual/en/tutorial.php">
</iframe>
</body>
</html>
into a new html doc and then open with a browser, you will see that
Refused to display 'https://www.php.net/manual/en/tutorial.php' in a
frame because it set 'X-Frame-Options' to 'sameorigin'.
in the broswer's console.
https://stackoverflow.com/a/27359031/8062552
I am trying to get a video with the video tag to include a fullscreen option in the controls. If I insert a video into a site using the following:
<video controls>
<source src="filename.mp4 " type="video/mp4">
</video>
I do not get the full screen button.
Interestingly when you look at w3schools the example on the page shows the fullscreen but when you click the Try me it does not.
Could it be because the tag is inside an frame? Is there a way around this?
"Could it be because the tag is inside an frame? Is there a way around this?"
Yes that seems to be the cause after some investigation. Putting a <video> tag inside an <iframe> will cause the fullscreen button to disappear in Firefox.
Regarding W3Schools...
The first page creates an actual video tag (see line 1143 of source code).
On the second "Try it yourself" page they're actually creating an iframe (see line 541 of "Try it" page's source code): var ifr = document.createElement("iframe"); etc.
Solution:
In the iframe code, add allowfullscreen, webkitallowfullscreenand mozallowfullscreen.
If using an <iframe> to load another HTML page (which holds the shown <video> code) then try:
<!DOCTYPE html>
<html>
<body>
<iframe width="800" height="600" src="video_page.html" frameborder="0" allowfullscreen webkitallowfullscreen mozallowfullscreen> </iframe>
</body>
PS:
"If I insert a video into a site using the following... [see posted code]"
Your posted code works fine. A <video> tag in a web page should have fullscreen controls. The problem you describe only shows up when using <iframe>.
My browser extension "opens" but does not display on webpages with frameset.
Example: Go to this example: https://www.w3schools.com/TAGs/tryit.asp?filename=tryhtml_frame_cols And replace the code with the following:
<frameset cols="25%,*,25%">
<iframe src="https://www.w3schools.com">
<p>Your browser does not support iframes.</p>
</iframe>
</frameset>
Notice the iframe does not show up. However, if you change the frameset tag to div tag then the iframe will display.
The frameset tag can only hold frame elements, not iframes. To use iframes, you can create a similar layout using div tags and CSS.
Note: frameset is not supported in HTML5 and should not be used.
I have the following video iFrame embed code on a page on my website (mywebsite.com/page2) - it plays a video that is hosted on an external site (http://wistia.com). I want to be able to send email clients a link to my video on my page (mywebsite.com/page2/mywebsitevideolink) - not a link to the external website, a link that opens up mywebsite.com/page2 and displays the video on my page that you would have to scroll down to see and starts playing it. How can this be accomplished? Thanks.
<p class="rtecenter"><iframe allowfullscreen=""
allowtransparency="true" class="wistia_embed" frameborder="0"
height="480" mozallowfullscreen="" msallowfullscreen=""
name="wistia_embed" oallowfullscreen="" scrolling="no"
src="//fast.wistia.net/embed/iframe/myvideo" webkitallowfullscreen=""
width="640"></iframe></p> "
Modify your p tag to <p class="rtecenter" id="video">and then your link is http://mywebsite.com/page2#video
Hope that this'll help you.
You can also set up a file which displays when you type /page2/mywebsitevideolink and redirects to /page2#video
If you want to link to a certain part of your page, just use an anchor link.
<div name="videopart">
VIDEO HERE
</div>
And for the link: http://yoursite.com/video.html#videopart
And for the player to autoplay, if you are using your video hosting's player, look in teir documentation for how to autoplay. If your just using the html tag, and the word autoplay in the beginning tag.
I am simply trying to have a YouTube video show up on my site, but instead I'm getting a blank shape of the video. Does anyone know why this could be or how to fix it? Thanks. Here is the portion of my code:
<DOCTYPE html>
<html>
<head>
</head>
<body>
<iframe width="420" height="345"
src="http://www.youtube.com/watch?v=nIsCs9_-LP8">
</iframe>
</body>
</html>
The key issue is the Youtube URL is missing the embed part. Every Youtube video has a embedded option.
You have:
http://www.youtube.com/watch?v=nIsCs9_-LP8
However we need to remove watch?v= and add embed/:
http://www.youtube.com/embed/nIsCs9_-LP8
The first link is meant for the Youtube site (not just the video, but the whole site) itself. The second is a version for the video itself which is what you need to embed onto your site.
Try this (straight from the Youtube video's embed option):
<iframe width="420" height="315" src="http://www.youtube.com/embed/nIsCs9_-LP8" frameborder="0" allowfullscreen></iframe>