<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html lang='en' class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/arlinadesign/pen/zvqedO?depth=everything&order=popularity&page=34&q=tools&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css'>
<style class="cp-pen-styles">@import url(https://meyerweb.com/eric/tools/css/reset/reset.css);
@import url(https://fonts.googleapis.com/css?family=Fjalla+One);
@import url(http://weloveiconfonts.com/api/?family=entypo);
/* entypo */
[class*="entypo-"]:before {
font-family: 'entypo', sans-serif;
}
body {
background: #444;
font-family: sans-serif;
font-size: 10pt;
font-smoothing: antialiased;
}
#header {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 50px;
background: #222;
z-index: 1;
transition: top .15s ease;
}
#header.closed {
top: -50px;
}
#header .logo {
cursor: pointer;
position: relative;
float: left;
width: 50px;
height: 50px;
background: rgba(255, 255, 255, 0.05);
overflow: hidden;
font-family: 'Fjalla One', sans-serif;
font-size: 20pt;
color: #FFF;
font-weight: bold;
line-height: 55px;
text-align: center;
}
#header .logo:before {
content: attr(data-title);
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
transform: rotate(-45deg);
}
#header .menu {
position: relative;
float: left;
width: 150px;
height: 30px;
margin: 10px 0 0 10px;
color: #FFF;
}
#header .menu .selected {
cursor: pointer;
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
padding: 0 10px;
border-radius: 3px;
background: rgba(255, 255, 255, 0.05);
font-weight: bold;
line-height: 30px;
}
#header .menu .selected:before {
float: right;
line-height: 33px;
}
#header .menu .drop {
position: absolute;
top: 40px;
left: 0;
right: 0;
max-height: 210px;
background: #333;
display: none;
overflow: auto;
font-weight: bold;
}
#header .menu .drop::-webkit-scrollbar {
width: 3px;
background: rgba(0, 0, 0, 0.15);
}
#header .menu .drop::-webkit-scrollbar-thumb {
background: #318DBD;
}
#header .menu .drop .link {
cursor: pointer;
height: 30px;
padding: 0 10px;
transition: background .15s ease;
line-height: 30px;
}
#header .menu .drop .link:hover, #header .menu .drop .link.checked {
background: #53AFDF;
}
#header .devices {
float: left;
height: 30px;
margin: 10px 0 0 10px;
}
#header .devices .device {
cursor: pointer;
float: left;
width: 30px;
height: 30px;
padding: 0;
margin: 0 5px 0 0;
border-radius: 3px;
outline: 0;
border: 0;
background: rgba(255, 255, 255, 0.05) url(https://goo.gl/C3q1YA);
transition: background-color .15s ease, background-position .15s ease;
}
#header .devices .device.desk {
background-position: 0 -30px;
}
#header .devices .device.desk:hover, #header .devices .device.desk.active {
background-position: 0 0;
}
#header .devices .device.tablet {
background-position: -30px -30px;
}
#header .devices .device.tablet:hover, #header .devices .device.tablet.active {
background-position: -30px 0;
}
#header .devices .device.tablet-land {
background-position: -60px -30px;
}
#header .devices .device.tablet-land:hover, #header .devices .device.tablet-land.active {
background-position: -60px 0;
}
#header .devices .device.phone {
background-position: -90px -30px;
}
#header .devices .device.phone:hover, #header .devices .device.phone.active {
background-position: -90px 0;
}
#header .devices .device.phone-land {
background-position: -120px -30px;
}
#header .devices .device.phone-land:hover, #header .devices .device.phone-land.active {
background-position: -120px 0;
}
#header .devices .device:hover {
background-color: rgba(255, 255, 255, 0.1);
}
#header .devices .device.active {
background-color: #53AFDF;
}
#header .options {
float: right;
height: 30px;
}
#header .options button {
cursor: pointer;
position: relative;
height: 30px;
border-radius: 3px;
outline: 0;
border: 0;
font-family: sans-serif;
font-size: 10pt;
color: #FFF;
font-weight: bold;
line-height: 30px;
text-align: center;
font-smoothing: antialiased;
transition: all .5s;
}
#header .options button.close {
position: fixed;
top: 10px;
right: 10px;
width: 30px;
padding: 0;
background: #FA3;
}
#header .options button.close:hover {
background: #E92;
}
#frame {
position: absolute;
top: 50px;
left: 0;
right: 0;
bottom: 0;
transition: top .15s ease;
}
#frame.closed {
top: 0;
}
#frame iframe {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
margin: auto;
border: 0;
box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.15), 0 0 25px rgba(0, 0, 0, 0.3);
transition: width .15s ease;
}
</style></head><body>
<header class='opened' id='header'>
<h1 class='logo' data-title='AD'></h1>
<div class='menu'>
<span class='selected icon-dar'>Responsive Youtube</span>
<ul class='drop'>
<li class='link checked' data-url='https://twistedshape.blogspot.com/p/youtube-responsive.html'>Contoh Video</li>
</ul>
</div>
<div class='devices'>
<button class='device desk active'></button>
<button class='device tablet'></button>
<button class='device tablet-land'></button>
<button class='device phone'></button>
<button class='device phone-land'></button>
</div>
<div class='options'>
<button class='close entypo-cancel'></button>
</div>
</header>
<main class='opened' id='frame'>
<iframe height='100%' src='https://twistedshape.blogspot.com/p/youtube-responsive.html' rel='nofollow' width='100%'></iframe>
</main>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script >// Youtube
setTimeout(function(){$(".video-youtube").each(function(){$(this).replaceWith('<iframe class="video-youtube loader" src="'+$(this).data("src")+'" allowfullscreen="allowfullscreen" height="281" width="500"></iframe>')})},5e3);
// Responsive Device
$('.menu .selected').on('click',function(){
$(this).next('.drop').toggle();
});
$('.menu .drop .link').on('click',function(){
var $active = $('.menu .checked'),
input = $(this).text(),
url = $(this).data('url'),
$selected = $('.menu .selected');
$active.removeClass('checked');
$(this).addClass('checked');
$selected.text(input);
$('#frame iframe').attr('src',url);
});
$('.close').on('click',function(){
if ( $('#header').hasClass('opened') ) {
$('#header,#frame').removeClass('opened').addClass('closed')
.find('.menu .drop').hide();
} else if ( $('#header').hasClass('closed') ) {
$('#header,#frame').removeClass('closed').addClass('opened');
}
if ( $(this).hasClass('entypo-down-open') ) {
$(this).removeClass('entypo-cancel').addClass('entypo-cancel');
} else if ( $(this).hasClass('entypo-down-open') ) {
$(this).removeClass('entypo-cancel').addClass('entypo-down-open');
}
});
$('.devices .device').on('click',function(){
var $active = $('.devices .active'),
$frame = $('#frame iframe');
if ( $(this).hasClass('desk') ) {
$active.removeClass('active');
$(this).addClass('active');
$frame.css({ width: '100%' });
} else if ( $(this).hasClass('tablet') ) {
$active.removeClass('active');
$(this).addClass('active');
$frame.css({ width: '788px' });
} else if ( $(this).hasClass('tablet-land') ) {
$active.removeClass('active');
$(this).addClass('active');
$frame.css({ width: '1040px' });
} else if ( $(this).hasClass('phone') ) {
$active.removeClass('active');
$(this).addClass('active');
$frame.css({ width: '340px' });
} else if ( $(this).hasClass('phone-land') ) {
$active.removeClass('active');
$(this).addClass('active');
$frame.css({ width: '500px' });
}
});
//# sourceURL=pen.js
</script>
</body></html>
