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

Question

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.

`

Answer 1

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>