Landing Page Attempt 01 help

1 
        <section id="video">
            <div class="videocontainer">
                <iframe class="webvideo" width="25vw" height="auto"
                    src="https://youtu.be/Fw2tSnixGBs">
            </div> <!--video container end-->
        </section>


    #video {
            display: flex;
            justify-content: center;
            margin-top: 5rem;
        }
        .videocontainer {
            max-width: 40vw;
            width: 100%;
        }
        .webvideo {
            width: 100%;
            max-width: 600px;
        }

The error I am getting is,

"Blocked by X-Frame-Options Policy

An error occurred during a connection to www.youtube.com.

Firefox prevented this page from loading in this context because the page has an X-Frame-Options policy that disallows it."

Can anyone help?

2

When you use a youtube video, just go to the video, click Share, and press embed, copy iframe.

Fixed:

<section id="video">
            <div class="videocontainer">
                <iframe class="webvideo" width="560" height="315" src="https://www.youtube.com/embed/Fw2tSnixGBs" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div> <!--video container end-->
        </section>
1 Like
3

Where did you get those other attributes from on iframe? Just curious so I can learn more. Thank you for the reply!

4

I am still getting the error. I think it has something to do specifically with Firefox. I am going to download Chromium and try it on there.

5

Here’s updated CSS to center iFrame.

    #video {
            display: flex;
            justify-content: center;
            margin-top: 5rem;
        }
        .videocontainer {
            max-width: 40vw;
            width: 100%;
        }
        .webvideo {
            display: block;
            margin: 0 auto;
        }

Here’s how to find the embed, after you click this, a box will appear, click embed

share
share1300×625 231 KB

iFrame is compatible with firefox, so you should be good to go.

source : https://www.w3schools.com/tags/tag_iframe.asp

Share your codepen so we can see what’s going on, you must have something else in your code that’s interacting with the video.

6

Here is my codepen:

However, it shows up fine on codepen, but not on Firefox on my computer. I tried on Chromium and it works fine.

7

Oh, that’s weird, I can’t help with that, as I am a complete newbie lol.

Maybe someone with more experience can chime in.

1 Like
8