I have seen a template, which has the following structure:
<div class="top-grid-left-left-grids">
<div class="col-md-8 top-grid-left-img">
<div data-video="Bzt6h5uFWOU" id="video">
<img src="images/f12.jpg" alt="Use your own screenshot.">
<div id="play" style=""></div>
</div>
</div>
<div class="col-md-4 top-grid-left-info">
<a class="text" href="single.html">Fusce ornare congue ligula vel placerat</a>
<p>Nam id sollicitudin felis. Nulla non bibendum arcu. Vestibulum non venenatis risus.Suspendisse venenatis venenatis mi.</p>
<div class="t-grid">
<ul>
<li><a href="#"><i class="fa fa-clock-o"></i> 2h</a></li>
<li><a href="#"><i class="fa fa-user"></i> Ornare Congue</a></li>
</ul>
</div>
</div>
<div class="clearfix"> </div>
</div>
Where the preview image is displayed in<img src="images/f12.jpg" alt="Use your own screenshot.">
And the video is played by adiv
<div id="play" style=""></div>
This method is performed by this demo of this template
How can I play a video with the video url using jQuery, without having to add a youtube embed iframe?
Note: The data of the videos and the url of the same I obtain through a query to the mysqli/php database.
It works for me like this:
HTML
Javascript (using the API)
DEMO
You can see it in
jsfiddle
, since it doesn't work with Stackoverflow code snippets.At the moment with jquery I didn't see a way to embed videos without using iframe.
you could use adobe
Or using object from hmtl5
Source: https://stackoverflow.com/questions/18726480/embed-html5-youtube-video-without-iframe
In php I usually use this snippet