wainori2199

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

wainori2199

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>

wainori2199

<div class="youtube" data-video="https://www.youtube.com/embed/動画ID?autoplay=1"><img src="https://img.youtube.com/vi/動画ID/mqdefault.jpg" alt="" width="320" height="180" /></div>

wainori2199

.youtube {
	display: inline-block;
	position: relative;
	overflow: hidden;
	width: 320px;
	height: 180px;
}
.youtube::before {
	position: absolute;
	content: "Click to Play";

wainori2199

<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.3.min.js"></script>
<script>// <![CDATA[
$('.youtube').click(function(){
video = '<iframe src="'+ $(this).attr('data-video') +'" frameborder="0" width="480" height="270"></iframe>';
$(this).replaceWith(video);
});
// ]]></script>

wainori2199

<div id="recommend-entries">
    <div id="recommend-entries-inner">
        <div class="hatena-module hatena-module-entries-access-ranking" 
            data-count="5" 
            data-display_entry_category="0"
            data-display_entry_image="1"
            data-display_entry_image_size_width="320"
            data-display_entry_image_size_height="200"
            data-display_entry_body_length="0"
            data-display_entry_date="0"