CODEWITHSUNDEEP
htmlyoutubematerialize
essbee
essbee

Reputation: 317

How can I display YouTube videos in a website built with materialize css?

I have the following html within my materializecss website. I referred to the documentation at http://materializecss.com/media-css.html).

<div class = "col s12 m6">
    <div class="video-container">
        <iframe src="//www.youtube.com/embed/7yDXeEJEi0A?wmode=opaque" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

When I view this page, all I see is an error message. The video is working fine on YouTube itself (I tried other videos also, no luck).

Other elements on this page (images, text, dropdown) are working fine. Any help will be greatly appreciated.

`

Upvotes: 0

Views: 1300

Answers (2)

Phillipe Marques
Phillipe Marques

Reputation: 11

This problem may be related to the link contained in the iframe. To do this, simply access the video link on youtube and select "share". Then click "Share a link." Finally, select "Embed".

<div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/7yDXeEJEi0A" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
</div>

Upvotes: 1

Sajid Manzoor
Sajid Manzoor

Reputation: 1428

Try adding http:// before video URL i have checked. it is working fine at my end, if i add http:// or https:// (https required SSL on your server/webpage) to play properly.

<div class = "col s12 m6">
    <div class="video-container">
        <iframe src="http://www.youtube.com/embed/7yDXeEJEi0A?wmode=opaque" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

Upvotes: 0

Related Questions