YouTube Video Widget ~ Foxycode

Cu ajutorul acestui widget puteti adauga pe pagina voastra web diferite video de pa propriul canal YouTube sau doar video-ul dorit.Mai multe detalii despre cum poti publica video by channel ID sau video ID gasiti pe Google Developers

- Vertical YouTube Widget:
HTML

CSS

.foxy-youtube-widget {
    border-collapse: separate;
    border-spacing: 0 1.5em;
    margin: 0 auto;
    position: relative;
}
.foxy-player:after {
    position: absolute;
    content: " ";
    background: url("http://s15.postimg.org/e9toxvml7/shadow.png") no-repeat scroll center center rgba(0, 0, 0, 0);
    width: 304px;
    height: 16px;
    z-index: -1;
}
.foxy-player {
    background: url("http://s14.postimg.org/520cxxxml/conten18.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    box-shadow: 0 0 2px 0 #999, 0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
    padding: 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.foxy-player-desc {
    color: #333;
    font-family: "Titillium Web",sans-serif;
    padding: 5px;
}
.foxy-player-desc a {
    color: #ff4500;
    text-decoration: none;
}
.foxy-widget-name {
    border-bottom: 1px solid #ccc;
    color: #333;
    font-family: "Titillium Web",sans-serif;
    font-size: 20px;
    font-weight: 600;
    text-align: center;
}

Live Preview

- Horizontal YouTube Widget:
HTML

<div id="foxy-youtube-widget">
  <div class="foxy-widget-name">
YouTube Widget</div>
<table class="widget-table">
<tr>  
  
<td class="foxy-player">
  <iframe id="ytplayer" type="text/html" width="300" height="168.75"
src="https://www.youtube.com/embed/?listType=user_uploads&list=CNN"
        frameborder="0" allowfullscreen></iframe>
  <br />
  <div class="foxy-player-desc">
Go to <a href="https://www.youtube.com/user/CNN">CNN</a> channel</div>
</td>

<td class="foxy-player">
<iframe id="ytplayer" type="text/html" width="300" height="168.75"
src="https://www.youtube.com/embed/?listType=user_uploads&list=MTV"
        frameborder="0" allowfullscreen></iframe>
  <br />
 <div class="foxy-player-desc">
Go to <a href="https://www.youtube.com/user/MTV">MTV</a> channel</div>
</td>

<td class="foxy-player">
<iframe id="ytplayer" type="text/html" width="300" height="168.75"
src="https://www.youtube.com/embed/?listType=user_uploads&list=Google"
        frameborder="0" allowfullscreen></iframe>
  <br />
 <div class="foxy-player-desc">
Go to <a href="https://www.youtube.com/user/Google">Google</a> channel</div>
</td>   
  
</tr>
</table>
</div>

CSS

#foxy-youtube-widget {
    margin: 0 auto;
    position: relative;
    width: 80%;
}
.widget-table {
    border-collapse: separate;
    border-spacing: 1.5em;
    margin: 0 auto;
    position: relative;
}
.foxy-player:after {
    position: absolute;
    content: " ";
    z-index: -1;
    width: 304px;
    height: 16px;
    background: url(http://s15.postimg.org/e9toxvml7/shadow.png) no-repeat center;
    bottom: 10px;
}
.foxy-player {
    background: url("http://s14.postimg.org/520cxxxml/conten18.png") repeat scroll 0 0 rgba(0, 0, 0, 0);
    border: 1px solid #fff;
    box-shadow: 0 0 2px 0 #999, 0 0 5px 0 rgba(0, 0, 0, 0.1) inset;
    padding: 3px;
    -webkit-border-radius: 4px;
    -moz-border-radius: 4px;
    border-radius: 4px;
}
.foxy-player-desc {
    color: #333;
    font-family: "Titillium Web",sans-serif;
    padding: 5px;
}
.foxy-player-desc a {
    color: #ff4500;
    text-decoration: none;
}
.foxy-widget-name {
    border-bottom: 1px solid #ccc;
    color: #333;
    font-family: "Titillium Web",sans-serif;
    font-size: 20px;
    font-weight: 600;
    position: relative;
    text-align: center;
    width: 90%;
    margin: 0 auto;
}

Live Preview

Pentru a schimba canalul YouTube editati in codul iframe,numele canalului in linia listType=user_uploads&list=CNN"

4 martie 2015

YouTube Video Widget

0 comentarii:

Trimiteți un comentariu

Shopping Cart

Google Translate

YouTube News

Advertising

Be our Fan

Blogroll

Search on blog