Musafir Blogspot: Bingkai vidio

Bingkai vidio

Daftar catatan

Data Bingkai vido banyak

Bingkai vido banyak

Bingkai vidio dari blogger atau Computer

Binkai Vidio aspect ratio youtube dan non youtube

Channel TV

Catatan 1

Bingkai Vidio dari youtube

dengan menguci aspec ratio

Link dari youtube:

https://youtu.be/R_WD9UIxNFI?si=lbkcqxV8Yg9knLON

Data Vidio setelah diupluad ke Html:

</span></div><div><div class="separator" style="clear: both; text-align: center;"><iframe allowfullscreen="" class="BLOG_video_class" height="309" src="https://www.youtube.com/embed/R_WD9UIxNFI" width="545" youtube-src-id="R_WD9UIxNFI"></iframe></div><br /><div class="separator" style="clear: both; text-align: center;"><br /></div><br /><span style="font-family: Arial Rounded;"><br /></span></div>

Url Embed dari dataa gambar:

https://www.youtube.com/embed/R_WD9UIxNFI

Aspec ratio dari data vidio setelah dipaskan:

545 : 309

HTML Vidio dari youtube:

</style>
<div class="video-container">
<iframe src="https://www.youtube.com/embed/R_WD9UIxNFI"
allowfullscreen></iframe>
</div>

Bingkai Vidio upluad dari Computer:

Data Vidio setelah diupluad dri Komputer:

</div>

Html Bingkai Vidio upluad dari Computer

Contoh Html1

sudah teruji aspct rationya di layar seluler

<style>

.video-container {
width: 100%;
max-width: 784;
aspect-ratio: 784 / 444;
position: relative;
overflow: hidden;
border: 2px solid red;
border-radius: 15px;

}

.video-container iframe {

width: 100%;

height: 100%;

border: none;

}

</style>

</div>

Html Bingkai Vidio upluad dari Computer

Contoh Html2

</style>
<div class="video-container">
<iframe
allowfullscreen
src="https://www.blogger.com/video.g?token=TOKEN_VIDEO_MU"
title="Video dari Komputer">
</iframe>
</div>

Catatan 2

Bingkai vidio tampa link
<div class="video-container">
<object
class="BLOG_video_class"
contentid="b4e3c52d102ef76d"
id="BLOG_video-b4e3c52d102ef76d"
width="100%"
height="100%"
aria-label="Upload video">
</object>
</div>

<style>

.video-container {
position: relative;
width: 100%; /* Lebar akan menyesuaikan container induk */
aspect-ratio: 485 / 255;
overflow: hidden;
}

.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
🔲🔲🔲

Bingkai vidio youtube
<div class="khusus">
<iframe allowfullscreen="0" frameborder="0" height="180" src="https://www.youtube.com/embed/POwevoiF2Ng" width="320">
</iframe>

</div>

<style>
.khusus {
width: 100%;
max-width: 100%;
aspect-ratio: 320 / 180;
position: relative;
border: 0px solid red;
border-radius: 20px;
overflow: hidden;
}
.khusus iframe,
.khusus object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
🔲🔲🔲🔲🔲🔲🔲🔲🔲

Bingkai vidio tampa link
<div class="Nona">
<object aria-label="Upload video" class="BLOG_video_class" contentid="809e0ce83c89ff11" height="180" id="BLOG_video-809e0ce83c89ff11" width="320">
</object>
</div>

<style>
.Nona {
width: 100%;
max-width: 100%;
aspect-ratio: 320 / 180;
position: relative;
border: 0px solid red;
border-radius: 20px;
overflow: hidden;
}
.Nona iframe,
.Nona object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
🔲🔲🔲🔲🔲🔲🔲🔲🔲

Bingkai vidio tampa link
<div class="khusus">
<object aria-label="Upload video" class="BLOG_video_class" contentid="809e0ce83c89ff11" height="180" id="BLOG_video-809e0ce83c89ff11" width="320">
</object>
</div>

<style>
.khusus {
width: 100%;
max-width: 100%;
aspect-ratio: 320 / 179;
position: relative;
border: 0px solid red;
border-radius: 0px;
overflow: hidden;
}
.khusus iframe,
.khusus object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
🔲🔲🔲🔲🔲🔲🔲🔲🔲

Bingkai vidio youtube
<divclass="Nona">
<iframe allowfullscreen="0" frameborder="0" height="180" src="https://www.youtube.com/embed/POwevoiF2Ng" width="320">
</iframe>
</div>

<style>
.Nona {
width: 30%;
max-width: 100%;
aspect-ratio: 320 / 180;
position: relative;
border: 0px solid red;
border-radius: 20px;
overflow: hidden;
}
.Nona iframe,
.Nona object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>

Pengaturan Vi dio di Gadged<style type="text/css">
.NonaVideo {
width: 100%;
max-width: 370px;
aspect-ratio: 16 / 9;
position: relative;
overflow: hidden;
}
.NonaVideo object {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>

<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
let vids = document.querySelectorAll("object.BLOG_video_class");
vids.forEach(function(v, i) {
v.addEventListener("click", function() {
vids.forEach(function(other, j) {
if (i !== j) {
let clone = other.cloneNode(true);
other.parentNode.replaceChild(clone, other);
}
});
});
});
});
</script>

Catatan 6

Channel TV
<div><span style="font-family: Caveat; font-size: x-large;">
TV Channel</span></div>

<div style="margin-bottom: 10px;">
<button data-src="https://www.youtube.com/embed/yNKvkPJl-tg" onclick="playTV(this)">TV One</button>
<button data-src="https://www.youtube.com/embed/weCEi1NE0C8" onclick="playTV(this)">Rtm</button>
<button data-src="https://www.youtube.com/embed/2Gub8-cSH9c" onclick="playTV(this)">Mekah</button>
<button data-src="https://www.youtube.com/embed/-CwtcKDaaLA" onclick="playTV(this)">Metro TV</button>
<button data-src="https://www.youtube.com/embed/OhTXCnOnvHM" onclick="playTV(this)">SCTV</button>
<button data-src="https://www.youtube.com/embed/S9C07h0QVT8" onclick="playTV(this)">iNews TV</button>
<button data-src="https://www.youtube.com/embed/DOOrIxw5xOw" onclick="playTV(this)">Kompas</button>

<button data-src="https://www.youtube.com/embed/GM_7gVa2Rzk" onclick="playTV(this)">Music</button>
<button data-src="https://www.youtube.com/embed/qpyUEzplRhE" onclick="playTV(this)">Music</button>

<button onclick="offTV(this)" style="background: #ddd; color: black;">🔴Off</button></div>

<div id="tvContainer" style="display: none; margin: 5px;">
<div style="margin: auto; max-width: 780px; position: relative; width: 97%;">

<div style="height: 0px; padding-bottom: 56.25%; position: relative;">
<iframe allowfullscreen="" id="tvFrame" src=""
style="border: none; border-radius: 10px; height: 100%; left: 0; position: absolute; top: 0; width: 100%;"></iframe></div></div></div>

<script>
function playTV(button) {const frame = document.getElementById("tvFrame");
const container = document.getElementById("tvContainer");
const src = button.dataset.src; container.style.display = "block"; frame.src = src;
document.querySelectorAll("button").forEach(btn => {btn.style.background = "";
btn.style.color = "";}); button.style.background = "#cc0000";
button.style.color = "white";}function offTV(button) {const frame = document.getElementById("tvFrame");
const container = document.getElementById("tvContainer");
// Kosongkan frame dan sembunyikan container
frame.src = ""; container.style.display = "none"; // Reset warna semua tombol
document.querySelectorAll("button").forEach(btn => {btn.style.background = "";
btn.style.color = "";}); // Tampilkan bahwa tombol ini sedang aktif (opsional)
button.style.background = "#888"; button.style.color = "white";}
</script>