<div class="img-wrapper">
	<img src="img/gallery/770x460/img01.jpg" class="img-responsive" alt="" />
	<div class="img-caption">
		<div class="content">
			<h5><a href="portfolio-detail.html">Audire admodum</a></h5>
			<p><a href="#">Web design</a></p>
		</div>
	</div>
</div>

<div class="media-wrapper embed-container">
	<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/iIRjiGDGOOQ"></iframe>
</div>

<div class="video-wrapper">
    <div class="play-icon small"><a href="#"><i class="fa fa-play"></i></a></div>
    <img src="img/video-half.jpg" class="img-responsive" alt="" />
    <div id="video1" class="jp-jplayer video"
         data-media="video"
         data-title="Big Buck Bunny"
         data-m4v="video/idea.m4v"
         data-ogv="video/idea.ogv"
         data-webmv="video/idea.webm"
         data-container="#jp_container2"></div>
    <div id="jp_container2" class="jp-audio">
        <table class="table-audio">
            <tr>
                <td class="toggle-play">
                    <a href="#" class="jp-play"><i class="fa fa-play-circle"></i></a>
                    <a href="#" class="jp-pause"><i class="fa fa-pause"></i></a>
                </td>
                <td class="time"><span class="jp-current-time"></span></td>
                <td class="Progres-audio">
                    <div class="jp-progress">
                        <div class="jp-seek-bar">
                            <div class="jp-play-bar"></div>
                        </div>
                    </div>
                </td>
                <td class="time"><span class="jp-duration"></span></td>
                <td class="toggle-mute">
                    <a href="#" class="jp-unmute"><i class="fa fa-volume-up"></i></a>
                      <a href="#" class="jp-mute"><i class="fa fa-volume-down"></i></a>
                </td>
                <td class="volume-bar">
                    <div class="jp-volume-bar">
                        <div class="jp-volume-bar-value"></div>
                    </div>
                </td>
            </tr>
        </table>
        <div class="jp-no-solution">
            <strong>Update Required</strong>
            To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
        </div>
    </div>  
</div>

<div id="audio1" class="jp-jplayer" 
     data-media="audio"
     data-sound="sound/bensound-acousticbreeze.mp3" 
     data-container="#jp_container1"></div>
<div id="jp_container1" class="jp-audio">
    <table class="table-audio">
        <tr>
            <td class="toggle-play">
                <a href="#" class="jp-play"><i class="fa fa-play-circle"></i></a>
                <a href="#" class="jp-pause"><i class="fa fa-pause"></i></a>
            </td>
            <td class="time"><span class="jp-current-time"></span></td>
            <td class="Progres-audio">
                <div class="jp-progress">
                    <div class="jp-seek-bar">
                        <div class="jp-play-bar"></div>
                    </div>
                </div>
            </td>
            <td class="time"><span class="jp-duration"></span></td>
            <td class="toggle-mute">
                <a href="#" class="jp-unmute"><i class="fa fa-volume-up"></i></a>
                <a href="#" class="jp-mute"><i class="fa fa-volume-down"></i></a>
            </td>
            <td class="volume-bar">
                <div class="jp-volume-bar">
                    <div class="jp-volume-bar-value"></div>
                </div>
            </td>
        </tr>
    </table>
    <div class="jp-no-solution">
        <strong>Update Required</strong>
        To play the media you will need to either update your browser to a recent version or update your <a href="http://get.adobe.com/flashplayer/" target="_blank">Flash plugin</a>.
    </div>
</div>